对应的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来删除，这样就动态绑定这每一行，不会出现
静态删除的问题。
