js實現(xiàn)添加刪除表格操作

更新時間：2021年10月08日 17:33:22 作者：星嶼H

這篇文章主要為大家詳細介紹了js實現(xiàn)添加刪除表格操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)添加刪除表格的具體代碼，供大家參考，具體內(nèi)容如下

效果:

1、點擊添加按鈕往table中添加一行將全選前面的復(fù)選框變成false

1.1.當前新增的復(fù)選框加上點擊事件

2、點擊刪除按鈕獲取表格體中被選中的行, 刪除整個tr, 將全選前面的復(fù)選框變成false

獲取的是第一個td中的checkbox的狀態(tài) checked為true 2層父子

3 、點擊全選按鈕前面的復(fù)選框如果被選中下面的每一個復(fù)選框都被選中如果不被選中下面的每一個復(fù)選框都不被選中

4、點擊每一個表格體中的復(fù)選框, 如果所有的復(fù)選框都被選中, 全選按鈕就是被選中, 如果有一個沒有被選中, 全選按鈕就是不選中狀態(tài)

css：

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

html:

<div class="head">
        <span>請輸入姓名 :</span><input type="text"><br>
        <span>請輸入性別 :</span><input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br>
        <span>請輸入年齡 :</span><input type="text"><button>添加到表格</button>
    </div>
    <table>
        <thead>
            <th><input type="checkbox"> 全選</th>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </thead>
        <tbody>
            <tr class="tr1">
                <td><input type="checkbox"></td>
                <td>張三</td>
                <td>女</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>女</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
<div class="foot"><button>刪除所選行</button></div>

javascript:

 // 事件三部曲
 // 1. 獲取元素 按鈕 table  tBody  復(fù)選框  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. 點擊添加按鈕
        btns[0].onclick = function(){
            // 3. 往table中添加一行
            var tr = document.createElement('tr');
            // 4. tr加到tbody
            table.tBodies[0].appendChild(tr);
 
            // 5. 創(chuàng)建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. 全選前面的復(fù)選框變成false 
            all.checked = false;
 
            // 當前新增的復(fù)選框加上點擊事件
            var bck = tr.querySelector('input');
            console.log(bck);
            bck.onclick = function(){
                auto();
            }
        }
 
 
        // 7. 點擊刪除按鈕 刪除所選中的行
        btns[1].onclick = function(){
            // 8. 獲取表格體中被選中的行
            // console.log(cks, cks1);
            // 9. 判斷復(fù)選框是否被選中
            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. 刪除整行
                    cks[i].parentNode.parentNode.remove();
                    i--;
                }
            }
            // 11. 將全選前面的復(fù)選框變成false
            all.checked = false;
        }
      
        // 點擊全選按鈕前面的復(fù)選框 如果被選中 下面的每一個復(fù)選框都被選中 如果不被選中 下面的每一個復(fù)選框都不被選中 
        // 12. 點擊all
        all.onclick = function(){
            console.log(all.checked);
            // 13. 每一個
            for(var i = 0; i < cks.length;i++){
                cks[i].checked = all.checked;
            }
        }
 
        // 點擊每一個表格體中的復(fù)選框, 如果所有的復(fù)選框都被選中, 全選按鈕就是被選中, 如果有一個沒有被選中, 全選按鈕就是不選中狀態(tài)
        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);
                //     // 如果有一個沒有被選中, 全選按鈕就是不選中狀態(tài)
                //     if(cks[i].checked == false){
                //         // 全選按鈕就是不選中
                //         all.checked = false;
                //         // 結(jié)束整個函數(shù)
                //         return;
                //     }
                // }
                // // 所有的都被選中
                // all.checked = true;
                auto();
            }
        }
 
        function auto() {
            // 所有的
            for(var i = 0; i < cks.length; i++){
                    console.log(cks[i].checked);
                    // 如果有一個沒有被選中, 全選按鈕就是不選中狀態(tài)
                    if(cks[i].checked == false){
                        // 全選按鈕就是不選中
                        all.checked = false;
                        // 結(jié)束整個函數(shù)
                        return;
                    }
                }
                // 所有的都被選中
                all.checked = true;
        }

效果: