原生JS实现添加、删除行

最新推荐文章于 2023-09-21 15:57:23 发布

猿林新秀

最新推荐文章于 2023-09-21 15:57:23 发布

阅读量606

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46021847/article/details/121352515

版权

JavaScript DOM操作 HTML表格动态添加删除行

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

<head>
    <title>原生JS实现添加、删除行</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
    <table border="1" width="50%" id="table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>xh001</td>
            <td>王小明</td>
            <td><a href="#" onclick="deltr(this)">删除</a></td>
        </tr>

        <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="#" onclick="deltr(this)">删除</a></td>
        </tr>

    </table>
    <input type="button" value="添加一行" onclick="addtr()" />
    <!--在添加按钮上添加点击事件  -->


    <script>
        let table = document.getElementById("table");
        let arr = document.getElementsByTagName("tr");
        let xh = 2;
        console.log(arr);

        //创建删除函数
        function deltr(obj) {
            let tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }

        //编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        function addtr() {
            //创建tr
            let trobj = document.createElement("tr");
            //创建td
            let tdobj1 = document.createElement("td");
            let tdobj2 = document.createElement("td");
            let tdobj3 = document.createElement("td");
            xh++;
            if (xh < 10) {
                tdobj1.innerText = `xh00${xh}`;
            } else if (xh < 100) {
                tdobj1.innerText = `xh0${xh}`;
            } else {
                tdobj1.innerText = `xh${xh}`;
            }
            tdobj2.innerText = prompt("请输入学员的姓名", '未录入');
            tdobj3.innerHTML = "<a href='#' οnclick='deltr(this)'>删除</a>";
            //添加td到tr
            trobj.appendChild(tdobj1);
            trobj.appendChild(tdobj2);
            trobj.appendChild(tdobj3);
            //添加tr到table
            table.appendChild(trobj);
        }
    </script>
</body>

</html>

猿林新秀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现添加、删除行

效果代码<!DOCTYPE html><html><head> <title>原生JS实现添加、删除行</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body> <table border="1" width="50%" id="table"&
复制链接

扫一扫

专栏目录