js Dom程式設計 動態新增和刪除表格行
阿新 • • 發佈：2020-10-13
js Dom程式設計 動態新增和刪除表格行
要求：製作一個表格，能夠動態新增和刪除學生資訊
1）能夠在表格末尾新增一行學生資訊
2）能夠刪除選中的一行學生資訊
步驟：
1）寫一個js函式能夠動態新增表格的資訊
2）寫一個js函式能夠刪除當前所選的行資訊
首先，我們先把表頭建立好
<table id="tab" border="1" width="960px" align="center"> <tr> <th>學號</th> <th>姓名</th> <th>操作</th> </tr> <tbody> </tbody> </table>
tbody標籤用於之後動態生成新的表格行
然後，建立一個按鈕，用於生成新的行
<div id="btn" align="center">
<input id="addBtn" type="button" value="新增一行" name="btn" onclick="add()">
</div>
寫新增行資訊的函式
function add() { var editTable = document.getElementById("tbody"); var tr = document.createElement("tr"); editTable.appendChild(tr); var td1 = document.createElement("td"); td1.innerHTML = "xh00" + i; var td2 = document.createElement("td"); td2.innerHTML = "第" + (i+1) + "學生"; var td3 = document.createElement("td"); td3.innerHTML = "<a href=# onclick='del(this)'>刪除</a>"; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); i++; }
前面要定義數字型變數i，用於顯示每行學生序數
定義刪除指定行的函式
function del(obj) {
var tr = obj.parentNode.parentNode;
var tbody = tr.parentNode;
tbody.removeChild(tr);
}
全部程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> #btn{ margin-top: 100px; } #addBtn{ width: 80px; height: 60px; } </style> </head> <body> <table id="tab" border="1" width="960px" align="center"> <tr> <th>學號</th> <th>姓名</th> <th>操作</th> </tr> <tbody id = "tbody"> </tbody> </table> <div id="btn" align="center"> <input id="addBtn" type="button" value="新增一行" name="btn" onclick="add()"> </div> <script> var i = 0; function del(obj) { var tr = obj.parentNode.parentNode; var tbody = tr.parentNode; tbody.removeChild(tr); } function add() { var editTable = document.getElementById("tbody"); var tr = document.createElement("tr"); editTable.appendChild(tr); var td1 = document.createElement("td"); td1.innerHTML = "xh00" + i; var td2 = document.createElement("td"); td2.innerHTML = "第" + (i+1) + "學生"; var td3 = document.createElement("td"); td3.innerHTML = "<a href=# onclick='del(this)'>刪除</a>"; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); i++; } </script> </body> </html>
實現效果：