用JS實現表格的增刪功能，添加或刪除一列：
實現結果如下圖：
1）添加行；
2）刪除行；
實現代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態表格</title> <style> a{ text-decoration: none; } .one{ margin: 0 auto; width: 1000px; } .btns { margin-bottom: 5px; } .btn { display: inline-block; padding: .3em 1.2em; border-radius: 3px; background-color: teal; color: #fff; cursor :pointer; } table.table { box-sizing: border-box; width: 100%; border-collapse: collapse; } table.table td , table.table th { border: 1px solid #ccc; line-height: 2em; text-align: center; } .none { display: none; } </style> </head> <body> <div class="one"> <div class="btns"> <div class="btn" id="btn_add">添加</div> <div class="btn">批量導入</div> <div class="btn">批量刪除</div> </div> <table class="table"> <thead> <tr> <th width="80px">編號</th> <th width="100px">班級</th> <th width="220px">姓名</th> <th width="80px">性別</th> <th width="80px">年齡</th> <th>郵箱</th> <th>手機</th> <th width="100px">操作</th> </tr> </thead> <tbody> <tr class="none" > <td><input type="checkbox"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <a class="btn_del" href="javascript:void(0)">刪除</a> <a class="btn_upd" href="javascript:void(0)">修改</a> </td> </tr> </tbody> </table> </div>
<script> //獲取Id為btn_add的元素，並將其賦值給btn_add var btn_add = document.getElementById("btn_add"); //獲取標簽名字為tbody的第一個標簽，並將其賦值給tbody var tbody = document.getElementsByTagName("tbody")[0]; // 為刪除按鈕綁定事件處理函數 tbody.onclick = function(event){ //新建觸發事件=觸發事件的Dom元素本身（觸發事件即點擊事件） var target = event.target; //如果觸發事件的節點名字===a（如果點擊a標簽） if(target.nodeName === "A"){ //如果觸發事件的class名字===btn_del（如果點擊class名字===btn_del的a標簽） if(target.className === "btn_del"){ //移除tody下的孩子（刪除點擊事件的父節點的父節點，即刪除點擊的a標簽的父節點（td標簽)的父節點（tr標簽） tbody.removeChild(target.parentNode.parentNode) } //如果觸發事件的class名字===btn_upd（如果點擊class名字===btn_upd的a標簽） if(target.className === "btn_upd"){ alert("修改"); } } } // 為添加按鈕綁定事件處理函數 btn_add.onclick = function(event){ // 產生一個tr，新添加行等於復制隱藏行 var newTr = tbody.firstElementChild.cloneNode(true); //新添加行的第2+1列的值為0-1之間的隨機小數 newTr.children[2].innerHTML = "<strong>"+Math.random()+"</strong>"; //新添加行的class名字為0-1之間的隨機小數，使其與復制的行不同，避免首CSS影響被隱藏 newTr.className = Math.random(); // 將一個tr追加到tbody tbody.appendChild(newTr); }; </script> </body> </html>