對應的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>
二、然后創建對應的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的行數據 }
實現效果如下：
在文本框輸入數據后，點擊submit按鈕：
然后點擊delete會刪除該行數據：
在這個當中，刪除數據時有可能會出現一點問題，刪除數據一定要根據每行的id來刪除，這樣就動態綁定這每一行，不會出現
靜態刪除的問題。
