效果：
交流群：970353786
布局代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 500px; /* border: 1px solid black; */ margin: 0px auto; } table{ width: 100%; } caption{ font-size: 40px; } table tr{ height: 40px; font-size: 20px; } tbody td{ text-align: center; } #box>button{ width: 100%; margin-top: 20px; height: 50px; background-color: aquamarine; border-radius: 25px; border: none; font-size: 20px; } </style> </head> <body> <div id="box"> <table border="1" cellspacing="0" cellpadding="0"> <caption>通讯录</caption> <thead> <tr><th>编号</th><th>姓名</th> <th>电话</th><th>操作</th></tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr> <tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr> </tbody> </table> <button type="button">添加新行</button> </div> </body> </html>
删除功能代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 500px; /* border: 1px solid black; */ margin: 0px auto; } table{ width: 100%; } caption{ font-size: 40px; } table tr{ height: 40px; font-size: 20px; } tbody td{ text-align: center; } #box>button{ width: 100%; margin-top: 20px; height: 50px; background-color: aquamarine; border-radius: 25px; border: none; font-size: 20px; } </style> </head> <body> <div id="box"> <table id="mytable" border="1" cellspacing="0" cellpadding="0"> <caption>通讯录</caption> <thead> <tr><th>编号</th><th>姓名</th> <th>电话</th><th>操作</th></tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr> <tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr> </tbody> </table> <button id="addNewLineBtn" type="button">添加新行</button> </div> </body> <script type="text/javascript"> //01-静态布局 var table = document.getElementById("mytable") var addNewLineBtn = document.getElementById("addNewLineBtn") //02-添加新行 addNewLineBtn.onclick = function(){ var tr = document.createElement("tr"); table.tBodies[0].appendChild(tr); var rowCount = table.tBodies[0].rows.length; console.log(rowCount); for (var i = 0;i < 4;i++) { var td = document.createElement("td"); tr.appendChild(td); if (i == 0 ) { td.innerText = rowCount } if (i == 3 ) { td.innerHTML = '<button type="button">删除</button>' } } // delLine(); } //03-删除一行 //方法一 // delLine(); // function delLine(){ // var allDeleteBtns = table.tBodies[0].getElementsByTagName("button") // for (var i = 0; i < allDeleteBtns.length; i++) { // allDeleteBtns[i].onclick = function(){ // table.tBodies[0].removeChild(this.parentNode.parentNode) // } // } // } //方法二：事件代理 table.tBodies[0].onclick = function(ev){ console.log(ev.target);//获取单击的元素 if (ev.target.type == "button") { this.removeChild(ev.target.parentNode.parentNode) } } </script> </html>
添加功能代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 500px; /* border: 1px solid black; */ margin: 0px auto; } table{ width: 100%; } caption{ font-size: 40px; } table tr{ height: 40px; font-size: 20px; } tbody td{ text-align: center; } #box>button{ width: 100%; margin-top: 20px; height: 50px; background-color: aquamarine; border-radius: 25px; border: none; font-size: 20px; } </style> </head> <body> <div id="box"> <table id="mytable" border="1" cellspacing="0" cellpadding="0"> <caption>通讯录</caption> <thead> <tr><th>编号</th><th>姓名</th> <th>电话</th><th>操作</th></tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr> <tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr> </tbody> </table> <button id="addNewLineBtn" type="button">添加新行</button> </div> </body> <script type="text/javascript"> //01-静态布局 var table = document.getElementById("mytable") var addNewLineBtn = document.getElementById("addNewLineBtn") //02-添加新行 addNewLineBtn.onclick = function(){ var tr = document.createElement("tr"); table.tBodies[0].appendChild(tr); var rowCount = table.tBodies[0].rows.length; console.log(rowCount); for (var i = 0;i < 4;i++) { var td = document.createElement("td"); tr.appendChild(td); if (i == 0 ) { td.innerText = rowCount } if (i == 3 ) { td.innerHTML = '<button type="button">删除</button>' } } } </script> </html>
