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

编程问答

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

發(fā)布時間：2024/7/5 编程问答 26 豆豆

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

對應的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

二、然后創(chuàng)建對應的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");//將想要輸入的數(shù)據(jù)加入至表格中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++; //每當添加一行數(shù)據(jù)，count便加一 } function delet(count){var row = document.getElementById(count);row.remove(count); //刪除id為count的行數(shù)據(jù) } View Code

實現(xiàn)效果如下：

在文本框輸入數(shù)據(jù)后，點擊submit按鈕：

?然后點擊delete會刪除該行數(shù)據(jù)：

在這個當中，刪除數(shù)據(jù)時有可能會出現(xiàn)一點問題，刪除數(shù)據(jù)一定要根據(jù)每行的id來刪除，這樣就動態(tài)綁定這每一行，不會出現(xiàn)

靜態(tài)刪除的問題。

轉(zhuǎn)載于:https://www.cnblogs.com/-heart-/p/10704104.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。