js zum Implementieren von Operationen zum Hinzufügen und Löschen von Tabellen

js zum Implementieren von Operationen zum Hinzufügen und Löschen von Tabellen

In diesem Artikelbeispiel wird der spezifische JS-Code zum Hinzufügen und Löschen von Tabellen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Wirkung:

1. Klicken Sie auf die Schaltfläche „Hinzufügen“, um der Tabelle eine Zeile hinzuzufügen, und ändern Sie das Kontrollkästchen vor „Alles auswählen“ in „Falsch“.

1.1. Das neu hinzugefügte Kontrollkästchen plus Klickereignis

2. Klicken Sie auf die Schaltfläche Löschen, um die ausgewählte Zeile im Tabellenkörper abzurufen, die gesamte Zeile zu löschen und das Kontrollkästchen vor „Alles auswählen“ auf „Falsch“ zu ändern.

Der Status des Kontrollkästchens im ersten td wird auf „true“ gesetzt.

3. Klicken Sie auf das Kontrollkästchen vor der Schaltfläche „Alles auswählen“. Wenn es aktiviert ist, werden alle Kontrollkästchen darunter aktiviert. Wenn es nicht aktiviert ist, werden alle Kontrollkästchen darunter deaktiviert.

4. Klicken Sie in jedem Tabellentext auf das Kontrollkästchen. Wenn alle Kontrollkästchen aktiviert sind, ist die Schaltfläche „Alle auswählen“ aktiviert. Wenn eines nicht aktiviert ist, ist die Schaltfläche „Alle auswählen“ deaktiviert.

CSS:

 <Stil>
        .Kopf {
            Breite: 500px;
            Polsterung: 8px;
            Rand: 20px automatisch;
            Box-Größe: Rahmenbox;
            Rand: 1px durchgezogen #eee;
        }
 
        Eingabe {
            Rand links: 3px;
            Gliederung: keine;
        }
 
        Taste {
            schweben: rechts;
        }
 
        Tisch {
            Breite: 500px;
            Rand: 1px durchgezogen #000;
            Rand: 0 automatisch;
            Rahmen-Zusammenbruch: Zusammenbruch;
        }
 
        tr,
        td,
        das {
            Rand: 1px durchgezogen #000;
        }
 
        tr td:ntes-Kind(1) {
            Textausrichtung: zentriert;
        }
 
        .Fuß {
            Breite: 500px;
            Rand: 8px automatisch;
            Polsterung: 8px;
            Box-Größe: Rahmenbox;
 
        }
 
        .Fußtaste {
            schweben: rechts;
        }
 
        td:n-tes-Kind(2),
        td:n-tes-Kind(3),
        td:ntes-Kind(4) {
            Breite: 20 %;
        }
</Stil>

html:

<div Klasse="Kopf">
        <span>Bitte geben Sie Ihren Namen ein:</span><input type="text"><br>
        <span>Bitte geben Sie Ihr Geschlecht ein:</span><input type="radio" name="sex" checked>Männlich<input type="radio" name="sex">Weiblich<br>
        <span>Bitte geben Sie Ihr Alter ein:</span><input type="text"><button>Zur Tabelle hinzufügen</button>
    </div>
    <Tabelle>
        <Kopf>
            <th><input type="checkbox"> Alles auswählen</th>
            <th>Name</th>
            <th>Geschlecht</th>
            <th>Alter</th>
        </thead>
        <tbody>
            <tr Klasse="tr1">
                <td><Eingabetyp="Kontrollkästchen"></td>
                <td>Zhang San</td>
                <td>Weiblich</td>
                <td>88</td>
            </tr>
            <tr>
                <td><Eingabetyp="Kontrollkästchen"></td>
                <td>Li Si</td>
                <td>Männlich</td>
                <td>18</td>
            </tr>
            <tr>
                <td><Eingabetyp="Kontrollkästchen"></td>
                <td>Wang Wu</td>
                <td>Weiblich</td>
                <td>12</td>
            </tr>
        </tbody>
    </Tabelle>
<div class="foot"><button>Ausgewählte Zeile löschen</button></div>

JavaScript:

 // Event-Trilogie // 1. Holen Sie sich das Element button table tBody checkbox inp
        var btns = document.querySelectorAll('Schaltfläche');
        var Tabelle = Dokument.QuerySelector('Tabelle');
        var inps = document.querySelectorAll('Eingabe');
        var alle = Tabelle.tHead.querySelector('Eingabe');
        var cks = table.tBodies[0].getElementsByTagName('Eingabe');
        var cks1 = table.tBodies[0].querySelectorAll('Eingabe');
        // console.log(btns, Tabelle, Eingänge, cks);
        // console.log(cks, alle);
        console.log(cks, cks1);
 
        // 2. Klicken Sie auf die Schaltfläche „Hinzufügen“ btns[0].onclick = function(){
            // 3. Fügen Sie der Tabelle eine Zeile hinzu var tr = document.createElement('tr');
            // 4. Füge tr zu tbody hinzu
            Tabelle.tBodies[0].appendChild(tr);
 
            // 5. td erstellen
            var inp = document.createElement('td');
            inp.innerHTML = '<input type="checkbox">';
            tr.appendChild(inp);
 
            var Benutzer = document.createElement('td');
            Benutzer.innerHTML = inps[0].Wert;
            tr.appendChild(Benutzer);
 
            var Geschlecht = document.createElement('td');
            sex.innerHTML = inps[1].checked ? 'sex' : 'sex';
            tr.appendChild(Geschlecht);
 
            var Alter = document.createElement('td');
            Alter.innerHTML = inps[3].Wert;
            tr.appendChild(Alter);
 
            // 6. Das Kontrollkästchen vor „Alles auswählen“ wird auf „false“ gesetzt. 
            alle.geprüft = falsch;
 
            // Das neu hinzugefügte Kontrollkästchen plus das Klickereignis var bck = tr.querySelector('input');
            Konsole.log(bck);
            bck.onclick = Funktion(){
                Auto();
            }
        }
 
 
        // 7. Klicken Sie auf die Schaltfläche Löschen, um die ausgewählte Zeile zu löschen btns[1].onclick = function(){
            // 8. Holen Sie die ausgewählte Zeile im Tabellenkörper // console.log(cks, cks1);
            // 9. Bestimmen Sie, ob das Kontrollkästchen aktiviert ist for(var i = 0; i < cks.length; i++){
                Konsole.log(cks);
                wenn(cks[i].checked){
                    // Konsole.log(cks[i].parentNode.parentNode);
                    // console.log(cks);
                    // 10. Lösche die gesamte Zeile cks[i].parentNode.parentNode.remove();
                    ich--;
                }
            }
            // 11. Ändere das Kontrollkästchen vor „Alles auswählen“ auf „false“
            alle.geprüft = falsch;
        }
      
        // Klicken Sie auf das Kontrollkästchen vor der Schaltfläche „Alle auswählen“. Wenn es ausgewählt ist, werden alle Kontrollkästchen darunter ausgewählt. Wenn es nicht ausgewählt ist, werden alle Kontrollkästchen darunter deaktiviert. // 12. Klicken Sie auf alle
        alle.onclick = function(){
            console.log(alle.geprüft);
            // 13. Jedes for(var i = 0; i < cks.length;i++){
                cks[i].checked = alle.checked;
            }
        }
 
        // Klicken Sie auf jedes Kontrollkästchen im Tabellenkörper. Wenn alle Kontrollkästchen aktiviert sind, wird die Schaltfläche „Alle auswählen“ aktiviert. Wenn eines nicht aktiviert ist, wird die Schaltfläche „Alle auswählen“ deaktiviert for(var j = 0; j < cks.length; j++){
            // Klicken Sie auf cks[j].onclick = function(){
                // alle // für(var i = 0; i < cks.length; i++){
                // Konsole.log(cks[i].checked);
                // // Wenn keines ausgewählt ist, ist die Schaltfläche „Alle auswählen“ deaktiviert // if (cks[i].checked == false) {
                // // Die Schaltfläche „Alles auswählen“ ist deaktiviert // all.checked = false;
                // // Beende die gesamte Funktion // return;
                // }
                // }
                // // Alle sind markiert // all.checked = true;
                Auto();
            }
        }
 
        Funktion auto() {
            // alles für(var i = 0; i < cks.length; i++){
                    Konsole.log(cks[i].geprüft);
                    // Wenn keines ausgewählt ist, ist die Schaltfläche „Alle auswählen“ deaktiviert if(cks[i].checked == false){
                        // Die Schaltfläche „Alles auswählen“ ist deaktiviert. all.checked = false;
                        // Beende die gesamte Funktion return;
                    }
                }
                // Alle sind ausgewählt all.checked = true;
        }

Wirkung:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • js implementiert dynamisch Operationen zum Hinzufügen und Löschen von Tabellen
  • AngularJS-Tabelle hinzufügen, löschen, ändern, Abfragemethode
  • js fügt dynamisch eine Tabelle Zeile für Zeile hinzu, um den Wert des Beispielcodes hinzuzufügen, zu löschen und zu durchlaufen
  • Dynamisches Hinzufügen und Löschen von Tabellenzeilen basierend auf JavaScript
  • Methoden zum dynamischen Hinzufügen und Löschen von Tabellenzeilen mit nativem JS und JQuery
  • Beispiel für das Hinzufügen und Löschen von Zeilen in einer einfachen Tabelle mit js
  • js-Implementierungscode zum dynamischen Hinzufügen und Löschen von Tabellenzeilen
  • Implementierungscode für kleine JS-Funktionen (Tabellenoperationen - dynamisches Hinzufügen und Löschen von Tabellen und Daten)
  • Beispiel für eine dynamische JavaScript-Operationstabelle (Zeilen, Spalten und Zellen hinzufügen, löschen)
  • js zum dynamischen Hinzufügen, Löschen von Zeilen und Onkeyup-Tabellensummenbeispiel

<<:  Detaillierte Erklärung zur Verwendung verschiedener MySQL-Indizes

>>:  So verwalten Sie mehrere Projekte auf dem CentOS SVN-Server

Artikel empfehlen

Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis

1. Die Div-CSS-Maushandform ist Cursor:Zeiger; 2. ...

Eine detaillierte Einführung in den Ausführungsmechanismus von JavaScript

Inhaltsverzeichnis 1. Das Konzept von Prozess und...

JavaScript zum Erzielen eines Tab-Umschalteffekts

In diesem Artikel wird der spezifische JavaScript...

Eine kurze Diskussion über 12 klassische Probleme in Angular

Inhaltsverzeichnis 1. Erklären Sie bitte, was die...

So führen Sie PostgreSQL mit Docker aus

1. Installieren Sie Docker. Referenz-URL: Docker-...

React-Beispiel, das den Fortschritt des Datei-Uploads zeigt

Inhaltsverzeichnis React-Demo zur Anzeige des Dat...

So legen Sie die Anzahl der MySQL-Verbindungen fest und ermitteln sie

Holen Sie sich die Anzahl der Verbindungen --- Ho...

Detaillierte Zusammenfassung des JavaScript-Arrays

Inhaltsverzeichnis 1. Array-Induktion 1. Teilen S...

So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen

Zweck der Verwendung von Nginx Lassen Sie uns zun...

Verwendung und Demonstration von ref in Vue

Ref-Definition: Wird verwendet, um Referenzinform...

Unterscheidung zwischen Linux-Hardlinks und Softlinks

Unter Linux gibt es zwei Arten von Dateiverbindun...

Implementierung eines einfachen Rechners mit Javascript

In diesem Artikelbeispiel wird der spezifische Ja...