代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 100%; text-align: center; margin: 50px auto; } table { border: 1px solid #ccc; width: 400px; margin: 30px auto; text-align: center; border-collapse: collapse; } table td, table th { border: 1px solid #ccc; } </style> </head> <body> <div id="box"> <div> <input type="text" name="" id="" placeholder='姓名'> <input type="text" name="" id="" placeholder='年龄'> <button id='btn'>点我添加</button> </div> <table id="tab"> <caption>统计表</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Amliy</td> <td>9</td> <td><button>删除</button></td> </tr> <tr> <td>2</td> <td>Bob</td> <td>6</td> <td><button>删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan='4'>总结</td> </tr> </tfoot> </table> </div> <script> var inp = document.getElementsByTagName('input'); var btn = document.getElementById('btn'); var tab = document.getElementById('tab'); btn.onclick = function () { var val1 = inp[0].value; // 姓名 var val2 = inp[1].value; // 年龄 var newTr = document.createElement('tr'); // 创建新的一行 // 创建第一列 // var newTd1 = document.createElement('td'); // newTd1.innerHTML = tab.tBodies[0].rows.length + 1; // 把增加的序号赋给它 newTr.appendChild(con('td', tab.tBodies[0].rows.length + 1)); // 序号加入到新行当中去 // 创建第二列 // var newTd2 = document.createElement('td'); // newTd2.innerHTML = val1; // 把用户填写的名字赋给它 newTr.appendChild(con('td', val1)); // 姓名加入到新行当中去 // 创建第三列 // var newTd3 = document.createElement('td'); // newTd3.innerHTML = val2; // 把用户填写的年龄赋给它 newTr.appendChild(con('td', val2)); // 年龄加入到新行当中去 newTr.appendChild(con('td', '<button>删除</button>')); // 删除按钮加入到新行当中去 // 将新行追加到表身中 tab.tBodies[0].appendChild(newTr); // 每添加一个新数据时，再次遍历删除按钮添加事件 del(); } function con(ele, val) { var newTd = document.createElement(ele); newTd.innerHTML = val // 把增加的序号赋给它 return newTd; } // 删除表格 function del() { var delBtn = tab.getElementsByTagName('button'); for (var i = 0; i < delBtn.length; i++) { delBtn[i].onclick = function () { this.parentNode.parentNode.remove(); // 删除当前行 } } } del(); </script> </body> </html>
效果
