js實現新增刪除表格操作
阿新 • • 發佈:2021-10-09
本文例項為大家分享了實現新增刪除表格的具體程式碼,供大家參考,具體內容如下
效果:
1、點選新增按鈕 往table中新增一行 將全選前面的複選框變成false
1.1.當前新增的複選框加上點選事件
2、點選刪除按鈕 獲取表格體中被選中的行,刪除整個tr,將全選前面的複選框變成false
獲取的是第一個td中的checkbox的狀態 checked為true 2層父子
3 、點選全選按鈕前面的複選框 如果被選中 下面的每一個複選框都被選中 如果不被選中 下面的每一個複選框都不被選中
4、點選每一個表格體中的複選框,如果所有的複選框都被選中,全選按鈕就是被選中,如果有一個沒有被選中,全選按鈕就是不選中狀態
:
<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; } tabhttp://www.cppcns.comle { 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>
:
// 事件三部曲 // 1. 獲取元素 按鈕 table tBody 複選框 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. 建立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. 全選前面的複選框變成false all.checked = false; // 當前新增的複選框加上點選事件 var bck = tr.querySelector('input'); console.log(bck); bck.onclick = function(){ auto(); } } // 7. 點選刪除按鈕 刪除所選中的行 btns[1].onclick = function(){ // 8. 獲取表格體中被選中的行 // console.log(cks,cks1); // 9. 判斷複選框是否被選中 for(var i = 0; i < cks.length; i++){ console.log(cks); if(cks[i].checked){ // console.log(cks[i].parentNode.parentNode); www.cppcns.com // console.log(cks); // 10. 刪除整行 cks[i].parentNode.parentNode.remove(); i--; } } // 11. 將全選前面的複選框變成false all.checked = false; } // 點選全選按鈕前面的複選框 如果被選中 下面的每一個複選框都被選中 如果不被選中 下面的每一個複選框都不被選中 // 12. 點選all all.onclick = function(){ console.log(all.checked); // 13. 每一個 for(var i = 0; i < cks.length;i++){ cks[i].checked = all.checked; } } // 點選每一個表格體中的複選框,全選按鈕就是不選中狀態 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(); } } function 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; }
效果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。