最终样式：
具体实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 300px; border: 1px #525252 solid; } th, td { border: 1px #525252 solid; text-align: center; } </style> </head> <body> <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> <script> // 获取添加行按钮标签 let but = document.getElementById('but'); // 获取thead标签 let thead = document.getElementsByTagName('thead')[0]; // 获取tbody标签 let tbody = document.getElementsByTagName('tbody')[0]; // 定义内容变量，表示为每一行显示的内容，初始为 100 let content = 100; // 给添加行绑定点击事件{ but.addEventListener('click', function() { // 通过thead标签获取内部tr let theadtr = document.getElementsByTagName('tr')[0]; // 获取tr里th的数量 let theadth = theadtr.getElementsByTagName('th'); // 创建一个新的tr标签 let newtr = document.createElement("tr"); // 循环th的数量{ for (let i = 0; i < theadth.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 == theadth.length - 1) { // 让这个td的内容为 "<button>删除</button>"; newtd.innerHTML = "<button>删除</button>"; } // } // 把当前新创建的td标签添加到新的tr标签内 newtr.appendChild(newtd); } // } // 把这个新创建的tr添加到tbody标签内 tbody.appendChild(newtr); // 调用隔行换色函数 sutcolor(); }) // } // 创建隔行换色函数{ function sutcolor() { // 获取当前tbody内tr的数量，表示为有多少行 let trs = tbody.children; // 循环行数{ for (let i = 0; i < trs.length; i++) { // 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{ if (i % 2 == 1) { // 给奇数这一行的颜色设置为粉色pink trs[i].style.backgroundColor = "pink"; } else { // }else{ // 否则设置为白色的 trs[i].style.backgroundColor = "white"; } } } // 给tbody绑定点击事件作为事件代理{ tbody.addEventListener('click', function(e) { // 兼容IE获取event事件对象 e = e || window.event; // 通过 event 事件对象获取事件源 let target = e.target || e.scrElement; // 判断事件源内容是否 "删除" { if (target.innerHTML == "删除") { // 通过事件源获取父元素的父元素，也就是当前点击的这一行 tr let trs = target.parentElement.parentElement; // 删除这一行 父元素.removeChild(子元素) // 父元素是tbody 子元素就是我没刚刚获取到的哪一行 tr tbody.removeChild(trs); // 调用序号排序函数 issort(); // 重新调用隔行换色函数 sutcolor(); } }) // 创建序号排序函数{ function issort() { // 一个tbody获取里边的tr，看看现在一共有多少行 let istr = tbody.children; // 循环行数{ for (let i = 0; i < istr.length; i++) { // 获取当前这一行里边的第一个td let istd = istr[i].children[0]; // 修改这个td的内容为 i + 1，为了重新设定序号 istd.innerHTML = i + 1; } } </script> </body> </html>
以上就是本章的全部内容，感谢您的阅读。
