js實現動態表格（新增刪除）

阿新 • • 發佈：2022-03-23

<!DOCTYPE html>
<html lang="en">
<head>
<title>Table_Simple CSS for HTML tables</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style type="text/css">
html {
    font-family: sans-serif;
    -ms-text-size-adjust 
: 100%;
    -webkit-text-size-adjust: 100%;
}
 
body {
    margin: 10px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
td,th {
    padding: 0;
}
 
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}
 
.pure-table caption  
{
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}
 
.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}
 
.pure-table thead  
{
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}
 
.pure-table td {
    background-color: transparent;
}
div.jizhong{
    text-align: center;
}
</style>
</head>
<body>
    <div class="jizhong">
    <input type="text" id="name">姓名<input type="text" id="age">年齡<input type="text" id="gender">性別 
    <button id="add">新增</button>
    </div>
    <table class="pure-table" id="tb" align="center">
        <caption>學生資訊表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>操作</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>王敬博</td>
                <td>18</td>
                <td>男</td>
                <td><a href="JavaScript:void(0)" onclick="drop(this)">刪除</a></td>
            </tr>
    
            <tr>
                <td>江銀濤</td>
                <td>20</td>
                <td>女</td>
                <td><a href="JavaScript:void(0)"  onclick="drop(this)">刪除</a></td>
            </tr>
           
        </tbody>
    </table>
    <script>
        //1 為新增按鈕繫結單擊事件
        document.getElementById("add").onclick = function(){
            //2建立行元素
        let tr = document.createElement("tr");
            //3建立四個單元格元素
            let nameTd = document.createElement("td");
            let ageTd = document.createElement("td");
            let genderTd = document.createElement("td");
            let deleteTd = document.createElement("td");
            //4將td新增到tr中
            tr.appendChild(nameTd);
            tr.appendChild(ageTd);
            tr.appendChild(genderTd);
            tr.appendChild(deleteTd);
            //5獲取文字框的輸入資訊
            let name = document.getElementById("name").value;
            let age = document.getElementById("age").value;
            let gender = document.getElementById("gender").value;
            //6將文字框資訊建立三個文字元素
            let nameText = document.createTextNode(name);
            let ageText = document.createTextNode(age);
            let genderText = document.createTextNode(gender);
            //7將三個文字元素新增到td中
            nameTd.appendChild(nameText);
            ageTd.appendChild(ageText);
            genderTd.appendChild(genderText);
            //8建立超連結元素和顯示的文字及新增href屬性
            let a =  document.createElement("a");
            let aText = document.createTextNode("刪除");
            a.setAttribute("href","JavaScript:void(0)");
            a.setAttribute("onclick","drop(this)")
            a.appendChild(aText);
            //9將超連結元素新增到td中
            deleteTd.appendChild(a);
            //10獲取表格元素，將新增到table中
            let table = document.getElementById("tb");
            table.appendChild(tr);

        }
        function drop(obj){
            //1獲取table元素
            let table = obj.parentElement.parentElement.parentElement;
            //2獲取tr元素
            let tr = obj.parentElement.parentElement;
            //3刪除tr
            table.removeChild(tr);
        }
    </script>
</body>
</html>

新增流程

1 為新增按鈕繫結單擊事件 2建立行元素 3建立四個單元格元素 4將td新增到tr中 5獲取文字框的輸入資訊 6將文字框資訊建立三個文字元素 7將三個文字元素新增到td中 8建立超連結元素和顯示的文字及新增href屬性 9將超連結元素新增到td中 10獲取表格元素，將新增到table中刪除流程 1獲取table元素 2獲取tr元素 3刪除tr