溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何用js實現添加刪除表格”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何用js實現添加刪除表格”吧!
效果:
1、點擊添加按鈕 往table中添加一行 將全選前面的復選框變成false
1.1.當前新增的復選框加上點擊事件
2、點擊刪除按鈕 獲取表格體中被選中的行, 刪除整個tr, 將全選前面的復選框變成false
獲取的是第一個td中的checkbox的狀態 checked為true 2層父子
3 、點擊全選按鈕前面的復選框 如果被選中 下面的每一個復選框都被選中 如果不被選中 下面的每一個復選框都不被選中
4、點擊每一個表格體中的復選框, 如果所有的復選框都被選中, 全選按鈕就是被選中, 如果有一個沒有被選中, 全選按鈕就是不選中狀態
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 復選框 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);
// 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;
}效果:
到此，相信大家對“如何用js實現添加刪除表格”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
