用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来删除，这样就动态绑定这每一行，不会出现

静态删除的问题。

 

 

posted @ 2019-04-14 10:21  heartflower  阅读(3084)  评论(0)  编辑  收藏  举报