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

 <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>

<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>

 // 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;
        }