テーブルの追加と削除の操作を実装する js

 <スタイル>
        。頭 {
            幅: 500ピクセル;
            パディング: 8px;
            マージン: 20px 自動;
            ボックスのサイズ: 境界線ボックス;
            境界線: 1px 実線 #eee;
        }
 
        入力{
            左マージン: 3px;
            アウトライン: なし;
        }
 
        ボタン {
            フロート: 右;
        }
 
        テーブル {
            幅: 500ピクセル;
            境界線: 1px実線 #000;
            マージン: 0 自動;
            境界線の折りたたみ: 折りたたみ;
        }
 
        tr、
        td、
        番目 {
            境界線: 1px実線 #000;
        }
 
        tr td:n番目の子(1) {
            テキスト配置: 中央;
        }
 
        。足 {
            幅: 500ピクセル;
            マージン: 8px 自動;
            パディング: 8px;
            ボックスのサイズ: 境界線ボックス;
 
        }
 
        .foot ボタン {
            フロート: 右;
        }
 
        td:n番目の子(2)、
        td:n番目の子(3)、
        td:n番目の子(4) {
            幅: 20%;
        }
</スタイル>

<div class="head">
        <span>名前を入力してください:</span><input type="text"><br>
        <span>性別を入力してください:</span><input type="radio" name="sex" selected>男性<input type="radio" name="sex">女性<br>
        <span>年齢を入力してください:</span><input type="text"><button>表に追加</button>
    </div>
    <テーブル>
        <頭>
            <th><input type="checkbox"> すべて選択</th>
            <th>名前</th>
            <th>性別</th>
            <th>年齢</th>
        </thead>
        <t本文>
            <tr クラス="tr1">
                <td><入力タイプ="チェックボックス"></td>
                <td>張三</td>
                <td>女性</td>
                <td>88</td>
            </tr>
            <tr>
                <td><入力タイプ="チェックボックス"></td>
                <td>李思</td>
                <td>男性</td>
                <td>18</td>
            </tr>
            <tr>
                <td><入力タイプ="チェックボックス"></td>
                <td>王武</td>
                <td>女性</td>
                <td>12</td>
            </tr>
        </tbody>
    </テーブル>
<div class="foot"><button>選択した行を削除</button></div>

 // イベント三部作 // 1. 要素ボタンテーブル tBody チェックボックス inp を取得する
        var btns = document.querySelectorAll('ボタン');
        var テーブル = document.querySelector('テーブル');
        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);
        コンソールにログ出力します。
 
        // 2. 追加ボタンをクリックする btns[0].onclick = function(){
            // 3. テーブルに行を追加します。 var tr = document.createElement('tr');
            // 4. tbodyにtrを追加する
            テーブル.tBodies[0].appendChild(tr);
 
            // 5. 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(ユーザー);
 
            var 性別 = document.createElement('td');
            sex.innerHTML = inps[1].checked ? '男' : '女';
            tr.appendChild(性別);
 
            var age = document.createElement('td');
            age.innerHTML = inps[3].value;
            tr.appendChild(年齢);
 
            // 6. 「すべて選択」の前のチェックボックスがfalseになる 
            すべてチェック済み = false;
 
            // 新しく追加されたチェックボックスとクリックイベント var bck = tr.querySelector('input');
            コンソールログ(bck);
            bck.onclick = 関数(){
                自動();
            }
        }
 
 
        // 7. 削除ボタンをクリックして選択した行を削除します btns[1].onclick = function(){
            // 8. テーブル本体で選択された行を取得します // console.log(cks, cks1);
            // 9. チェックボックスが選択されているかどうかを判定する for(var i = 0; i < cks.length; i++){
                コンソールログ(cks);
                if(cks[i].checked){
                    // console.log(cks[i].parentNode.parentNode);
                    // コンソールログ(cks);
                    // 10. 行全体を削除します cks[i].parentNode.parentNode.remove();
                    私 - ;
                }
            }
            // 11. 「すべて選択」の前のチェックボックスをfalseに変更します
            すべてチェック済み = false;
        }
      
        // すべて選択ボタンの前のチェックボックスをクリックします。選択されている場合は、その下のチェックボックスがすべて選択されます。選択されていない場合は、その下のチェックボックスがすべてオフになります。// 12. すべてをクリックします
        all.onclick = 関数(){
            console.log(すべてチェック済み);
            // 13. 各for(var i = 0; i < cks.length;i++){
                cks[i].checked = all.checked;
            }
        }
 
        // テーブル本体の各チェックボックスをクリックします。すべてのチェックボックスが選択されている場合は、[すべて選択] ボタンが選択されます。1 つも選択されていない場合は、[すべて選択] ボタンは選択解除されます for(var j = 0; j < cks.length; j++){
            // クリック cks[j].onclick = function(){
                // すべて // for(var i = 0; i < cks.length; i++){
                // console.log(cks[i].checked);
                // // いずれかが選択されていない場合、すべて選択ボタンはチェックされません // if (cks[i].checked == false) {
                // // すべて選択ボタンはチェックされていません // all.checked = false;
                // // 関数全体を終了します // return;
                // }
                // }
                // // すべてチェックされています // all.checked = true;
                自動();
            }
        }
 
        関数auto() {
            // すべて for(var i = 0; i < cks.length; i++){
                    console.log(cks[i].checked);
                    // いずれかが選択されていない場合、すべて選択ボタンはチェックされません if(cks[i].checked == false){
                        // すべて選択ボタンのチェックが外れています all.checked = false;
                        // 関数全体を終了します return;
                    }
                }
                // すべて選択されています all.checked = true;
        }