纯靠网页简单实现表格信息的添加和删除

实现要求:

1.可将用户输入的信息添加到表格中

2.通过单击删除按钮可以删除表格内指定行的内容

纯靠网页简单实现表格信息的添加和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格行的添加及删除</title>
    <style>
        input{
            width:200px;
            height: 25px;
            margin-bottom: 10px;
        }
        table td{
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<form>&emsp;&emsp;名:<input type="text" id="user"><br>&emsp;&emsp;龄:<input type="text" id="age"><br>
    电话号码:<input type="text" id="phone"><br>
    <input type="button" value="添加" onclick="add()">
</form>
<table border="1" id="tab">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>电话号码</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>45</td>
        <td>17596996865</td>
        <!--this表示用户当前选中的那个删除按钮,即<button onclick="del(this)">删除</button>-->
        <td><button onclick="del(this)">删除</button></td>
    </tr>
</table>
<script>
    // 实现表格信息添加功能
    function add() {
        // 获取元素
        var user = document.getElementById("user");
        var age = document.getElementById("age");
        var phone = document.getElementById("phone");
        var table = document.getElementById("tab");
        // 创建行
        var tr = document.createElement("tr")
        // 创建列
        var td1 = document.createElement("td");
        td1.innerText = user.value;
        var td2 = document.createElement("td");
        td2.innerText = age.value;
        var td3 = document.createElement("td");
        td3.innerText = phone.value;
        var td4 = document.createElement("td");
        td4.innerHTML = "<button οnclick='del()'>删除</button>";
        // 将列放入行里面
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        // 将行放入表格里面
        table.appendChild(tr);
        // 将输入数据添加到表格后清空输入框
        user.value = "";
        age.value = "";
        phone.value = "";
    }
    // 实现删除按钮的功能实现
    function del(obj) {
        var tab = document.getElementById("tab");
        // 通过单击那个删除按钮获取删除的那一行的行数
        var row = obj.parentNode.parentNode.rowIndex;    //obj.parentNode是this的父级节点,即:包含删除按钮的td元素
                                                         //然后再.parentNode查询父节点,即:包含这个td的行元素tr
                                                         //最后.rowIndex是获取这个行元素在表格中的行数。
        // 删除行
        tab.deleteRow(row);
    }
</script>
</body>
</html>

猜你喜欢