當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用js实现表格行的动态添加与删除

發布時間：2024/7/5 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了用js实现表格行的动态添加与删除小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

對應的html代碼如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/insert.js" ></script> </head><body><h2 style="text-align: center;">添加新員工</h2><center>name:<input type="text" id="newname"/>email:<input type="text" id="email"/>salary:<input type="text" id="salary"/><p></p><input type="button" value="Sumbit" id="insert" onclick="add()"/><table border="1" style="margin-top: 50px;"><tbody id="info"><tr><td>Name</td><td>Email</td><td>Salary</td><td></td></tr></tbody> </table> </center> </body> </html> View Code

二、然后創建對應的JavaScript文件：

var count=0; //設置一個 count值，用于存儲td的id function add(){//alert("sss");//var add=document.getElementById("insert");var ta=document.getElementById("info");//var len=ta.rows.length;var name=document.getElementById("newname").value;var email=document.getElementById("email").value;var salary=document.getElementById("salary").value;var tr=document.getElementById("info");//將想要輸入的數據加入至表格中tr.innerHTML+="<tr id='" + count +"'>"+"<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+'<td><a href="javascript:delet('+count+')">'+"delete"+"</a></td>"+"</tr>";count++; //每當添加一行數據，count便加一 } function delet(count){var row = document.getElementById(count);row.remove(count); //刪除id為count的行數據 } View Code

實現效果如下：

在文本框輸入數據后，點擊submit按鈕：

?然后點擊delete會刪除該行數據：

在這個當中，刪除數據時有可能會出現一點問題，刪除數據一定要根據每行的id來刪除，這樣就動態綁定這每一行，不會出現

靜態刪除的問題。

轉載于:https://www.cnblogs.com/-heart-/p/10704104.html

總結

以上是生活随笔為你收集整理的用js实现表格行的动态添加与删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。