效果图：
HTML:
<table cellspacing="0"> <thead> <tr> <th>序号</th> <th>内容</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>data</td> <td> <button>删除</button> </td> </tr> </tbody> </table> <button id="but">添加行</button>
CSS:
table { width: 300px; border: 1px #525252 solid; } th, td { border: 1px #525252 solid; text-align: center; }
JS:
// 获取添加行按钮标签 let but = document.getElementById("but"); // 获取thead标签 let thead = document.getElementsByTagName("thead")[0]; // 获取tbody标签 let tbody = document.getElementsByTagName('tbody')[0]; // 定义内容变量，表示为每一行显示的内容，初始为 100 let content = 100; // 给添加行绑定点击事件{ but.onclick = function() { // 通过thead标签获取内部tr let theadtr = thead.getElementsByTagName("tr")[0]; // 获取tr里th的数量 let ths = theadtr.children; // 创建一个新的tr标签 let newtr = document.createElement("tr"); // 循环th的数量{ for (let i = 0; i < ths.length; i++) { // 创建td标签 let newtd = document.createElement("td"); // 通过tbody获取里边tr的数量,为了设置序号 let tbodytr = tbody.children; // 判断i下标是否为0，是不是第一个td标签{ if (i == 0) { // 让这个td标签的内容为 tr数量长度+1 定义序号 newtd.innerHTML = tbodytr.length + 1; } // } // 判断i下标是否等于1 ，是否为第二个td{ if (i == 1) { // 设置内容为 内容变量 newtd.innerHTML = content; // 内容变量 += 100 content += 100; } // } // 判断i下标是否为th的长度-1 是否为最后一个{ if (i == ths.length - 1) { // 让这个td的内容为 "<button>删除</button>"; newtd.innerHTML = "<button>删除</button>"; } // } // 把当前新创建的td标签添加到新的tr标签内 newtr.appendChild(newtd); } // } // 把这个新创建的tr添加到tbody标签内 tbody.appendChild(newtr); // 调用隔行换色函数 cutcolor(); } // } // 创建隔行换色函数{ function cutcolor() { // 获取当前tbody内tr的数量，表示为有多少行 let trs = tbody.children console.log(trs); // 循环行数{ for (let i = 0; i < trs.length; i++) { // 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{ if (i % 2 == 1) { console.log(i); let strs = 'abcdef1234567890'; for (let j = 0; j < strs.length; j++) { console.log(j); } // 给奇数这一行的颜色设置为粉色pink trs[i].style.backgroundColor = "pink"; } else { // }else{ // 如果为偶数，设置为白色的 trs[i].style.backgroundColor = "#FFFFFF"; } // } } // } } // } // 给tbody绑定点击事件作为事件代理{ tbody.addEventListener("click", function(e) { // 兼容IE获取event事件对象 e = e || window.event; // 通过 event 事件对象获取事件源 let target = e.target || e.srcElement; // 判断事件源内容是否 "删除" { if (target.innerHTML == "删除") { // 通过事件源获取父元素的父元素，也就是当前点击的这一行 tr let istr = target.parentElement.parentElement; // 删除这一行 父元素.removeChild(子元素) // 父元素是tbody 子元素就是我没刚刚获取到的哪一行 tr tbody.removeChild(istr); // 调用序号排序函数 issort(); // 重新调用隔行换色函数 cutcolor(); } // } }) // } // 创建序号排序函数{ function issort() { // 一个tbody获取里边的tr，看看现在一共有多少行 let trs = tbody.children; // 循环行数{ for (let i = 0; i < trs.length; i++) { // 获取当前这一行里边的第一个td let trstd = trs[i].children[0]; // 修改这个td的内容为 i + 1，为了重新设定序号 trstd.innerHTML = i + 1; } // } } // } function isNaN(n) { if (n !== n) { return true; } else { return false; } } console.log(isNaN());
