JavaScript-动态生成表格实现，创建删除表数据

Shawn_RJF

于 2022-10-30 10:14:10 发布

阅读量408

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/rjf666/article/details/127595887

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

要实现表格添加按钮的功能：

为按钮添加绑定单击事件
创建行元素
创建单元格元素
将单元格元素添加到行元素中
获取文本框内的内容
创建相应的文本元素
把文本元素添加到单元格元素里
创建删除功能的超链接元素
将超链接元素添加到单元格里
获取table元素，将行元素添加到table里

要实现删除功能：

为每个删除超链接添加单击事件
获取table元素
获取行元素
通过table元素删除行元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格test</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    
    </style>
</head>
<body>
    <div>
        <input type="text", id="name", placeholder="请输入姓名", autocomplete="off">
        <input type="text", id="age", placeholder="请输入年龄", autocomplete="off">
        <input type="text", id="sex", placeholder="请输入性别", autocomplete="off">
        <input type="button", value="添加", id="add">
    </div>
    <table id = "tb">
        <caption>学生信息表</caption>
        <tbody>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>66</td>
                <td>男</td>
                <td>
                    <a href="JavaScript:void(0);" onclick="drop(this)">删除</a>
                    <!-- JavaScript:void(0);起到点击删除后，不刷新页面这样一个功能 -->
                </td>
            </tr>
            <tr>
                <td>李四</td>
                <td>88</td>
                <td>男</td>
                <td>
                    <a href="JavaScript:void(0);" onclick="drop(this)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        // 完成添加功能需要：
        // 为添加按钮绑定单击事件
        document.getElementById("add").onclick = function(){
            // 创建行元素<tr>
                let tr = document.createElement("tr");

            // 创建4个单元格元素<td>
                let nametd = document.createElement("td");
                let agetd = document.createElement("td");
                let sextd = document.createElement("td");
                let deletetd = document.createElement("td");

            // 将<td>添加到<tr>中
                tr.appendChild(nametd);
                tr.appendChild(agetd);
                tr.appendChild(sextd);
                tr.appendChild(deletetd);

            // 获取输入框的文本内容
                let name = document.getElementById("name").value;
                let age = document.getElementById("age").value;
                let sex = document.getElementById("sex").value;

            // 创建相应数量的文本元素
                let nameText = document.createTextNode(name);
                let ageText = document.createTextNode(age);
                let sexText = document.createTextNode(sex);

            // 将文本元素添加到<td>中
                nametd.appendChild(nameText);
                agetd.appendChild(ageText);
                sextd.appendChild(sexText);

            // 创建超链接元素和显示的文本以及添加href属性
                let a = document.createElement("a");
                let aText = document.createTextNode("删除");
                a.setAttribute("href", "JavaScript:void(0);");
                a.appendChild(aText);
                a.setAttribute("onclick", "drop(this)");
                
            // 将超链接元素添加到<td>中
                deletetd.appendChild(a);

            // 获取table元素，将<tr>添加到table中
                let table = document.getElementById("tb");
                table.appendChild(tr);
                // document.write("===================");
        }

        // 完成删除功能需要使用父元素删除子元素：
        // 为每个删除超链接添加单击事件属性
        // 定义删除方法
        function drop(obj){
            // 获取table元素
            let table = obj.parentElement.parentElement.parentElement;
            // 获取tr元素
            let tr = obj.parentElement.parentElement;
            // 通过table删除tr
            table.removeChild(tr);
        }
        
        
    </script>
</body>
</html>

初始页