操作表格示例---新增和刪除表格內容
阿新 • • 發佈：2020-07-09
程式碼
<!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>