js to implement add and delete table operations

 <style>
        .head {
            width: 500px;
            padding: 8px;
            margin: 20px auto;
            box-sizing: border-box;
            border: 1px solid #eee;
        }
 
        input {
            margin-left: 3px;
            outline: none;
        }
 
        button {
            float: right;
        }
 
        table {
            width: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            border-collapse: collapse;
        }
 
        tr,
        td,
        th {
            border: 1px solid #000;
        }
 
        tr td:nth-child(1) {
            text-align: center;
        }
 
        .foot {
            width: 500px;
            margin: 8px auto;
            padding: 8px;
            box-sizing: border-box;
 
        }
 
        .foot button {
            float: right;
        }
 
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4) {
            width: 20%;
        }
</style>

<div class="head">
        <span>Please enter your name:</span><input type="text"><br>
        <span>Please enter your gender:</span><input type="radio" name="sex" checked>Male<input type="radio" name="sex">Female<br>
        <span>Please enter your age:</span><input type="text"><button>Add to table</button>
    </div>
    <table>
        <thead>
            <th><input type="checkbox"> Select All</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
        </thead>
        <tbody>
            <tr class="tr1">
                <td><input type="checkbox"></td>
                <td>Zhang San</td>
                <td>Female</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Li Si</td>
                <td>Male</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Wang Wu</td>
                <td>Female</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
<div class="foot"><button>Delete selected row</button></div>

 // Event trilogy // 1. Get the element button table tBody checkbox inp
        var btns = document.querySelectorAll('button');
        var table = document.querySelector('table');
        var inps = document.querySelectorAll('input');
        var all = table.tHead.querySelector('input');
        var cks = table.tBodies[0].getElementsByTagName('input');
        var cks1 = table.tBodies[0].querySelectorAll('input');
        // console.log(btns, table, inps, cks);
        // console.log(cks, all);
        console.log(cks, cks1);
 
        // 2. Click the add button btns[0].onclick = function(){
            // 3. Add a row to the table var tr = document.createElement('tr');
            // 4. Add tr to tbody
            table.tBodies[0].appendChild(tr);
 
            // 5. Create td
            var inp = document.createElement('td');
            inp.innerHTML = '<input type="checkbox">';
            tr.appendChild(inp);
 
            var user = document.createElement('td');
            user.innerHTML = inps[0].value;
            tr.appendChild(user);
 
            var sex = document.createElement('td');
            sex.innerHTML = inps[1].checked ? '男' : '女';
            tr.appendChild(sex);
 
            var age = document.createElement('td');
            age.innerHTML = inps[3].value;
            tr.appendChild(age);
 
            // 6. The checkbox in front of Select All becomes false 
            all.checked = false;
 
            // The newly added checkbox plus the click event var bck = tr.querySelector('input');
            console.log(bck);
            bck.onclick = function(){
                auto();
            }
        }
 
 
        // 7. Click the delete button to delete the selected row btns[1].onclick = function(){
            // 8. Get the selected row in the table body // console.log(cks, cks1);
            // 9. Determine whether the check box is selected for(var i = 0; i < cks.length; i++){
                console.log(cks);
                if(cks[i].checked){
                    // console.log(cks[i].parentNode.parentNode);
                    // console.log(cks);
                    // 10. Delete the entire row cks[i].parentNode.parentNode.remove();
                    i--;
                }
            }
            // 11. Change the checkbox in front of Select All to false
            all.checked = false;
        }
      
        // Click the checkbox in front of the Select All button. If it is selected, all the checkboxes below it will be selected. If it is not selected, all the checkboxes below it will be unchecked. // 12. Click all
        all.onclick = function(){
            console.log(all.checked);
            // 13. Each for(var i = 0; i < cks.length;i++){
                cks[i].checked = all.checked;
            }
        }
 
        // Click on each checkbox in the table body. If all checkboxes are selected, the Select All button is selected. If one is not selected, the Select All button is unselected for(var j = 0; j < cks.length; j++){
            // Click cks[j].onclick = function(){
                // all // for(var i = 0; i < cks.length; i++){
                // console.log(cks[i].checked);
                // // If one is not selected, the select all button is unchecked // if (cks[i].checked == false) {
                // // The select all button is unchecked // all.checked = false;
                // // End the entire function // return;
                // }
                // }
                // // All are checked // all.checked = true;
                auto();
            }
        }
 
        function auto() {
            // all for(var i = 0; i < cks.length; i++){
                    console.log(cks[i].checked);
                    // If one is not selected, the select all button is unchecked if(cks[i].checked == false){
                        // The select all button is unchecked all.checked = false;
                        // End the entire function return;
                    }
                }
                // All are selected all.checked = true;
        }