首先呢我们先说一下功能的具体要求：
- 点击添加按钮会添加一行
- 点击删除会删除一行，序号不变，再次点击添加时，内容在删除的值的基础上加100
- 奇数是白色，偶数是粉色
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格隔行换色功能</title> <link rel="stylesheet" href="./css/选项卡.css"> </head> <body> <table border="1" cellspacing="0"> <thead> <tr align="center"> <th width="50px">序号</th> <th width="80px">内容</th> <th width="100px">操作</th> </tr> </thead> <tbody align="center"> <tr> <td>1</td> <td>data</td> <td> <button onclick="del(event)">删除</button> </td> </tr> </tbody> </table> <button id="box" style="margin-left: 18%;">添加</button> <script src="js/表格隔行换色功能.js"></script> </body> </html>
JS代码
let box = document.getElementById('box'); // 获取表格的身体 let thbody = document.getElementsByTagName('tbody')[0]; // 获取按钮 let but = document.getElementsByTagName('button')[0]; // 定义一个内容初始值为100 // tr是行，td是格。 let content = 100; // 给添加行绑定点击事件 box.onclick = function() { // 获取内部tr let TR = document.getElementsByTagName('tr')[0]; let on = document.children; // 获取内部格td let TD = document.getElementsByTagName('td')[0]; let thbodytoo = thbody.children; // 创建新的tr标签 let onetr = document.createElement('tr'); // 循环格的长度当点击box时创建行，格 for (let k = 0; k < 3; k++) { // 创建新的td标签 let onetd = document.createElement('td'); if (k == 0) { onetd.innerHTML = thbodytoo.length + 1 } onetr.appendChild(onetd); if (k == 1) { onetd.innerHTML = content; content += 100; } thbody.appendChild(onetr); if (k == 2) { onetd.innerHTML = '<button onclick="del(event)">删除</button>'; } } // 在点击这里调用换色函数 color() } // 换色 function color() { // 循环整个表格内容 let thbodytoo = thbody.children; // 循环判断行颜色 for (let i = 0; i < thbodytoo.length; i++) { if (i % 2 != 0) { thbodytoo[i].style.backgroundColor = 'hotpink'; } else if (i % 2 != 1) { thbodytoo[i].style.backgroundColor = 'white'; } } } // 删除 function del(e) { let img = e.target; let img_one = img.parentElement.parentElement; thbody.removeChild(img_one); sort() color() } // 排序 function sort() { let thbodytoo = thbody.children; for (let b = 0; b < thbodytoo.length; b++) { let item = thbodytoo[b].children[0]; item.innerHTML = b + 1; } }
以上就是如何用JS实现表格隔行换色功能。
