用js實現表格行的動態添加與刪除

時間 2019-11-08

原文原文鏈接

對應的html代碼以下：javascript

<!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

2、而後建立對應的JavaScript文件：html

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的行數據
}