JavaScript - 操作元素 - 节点操作 - 复制节点

最新推荐文章于 2024-02-16 21:44:50 发布

学习中的小菜鸟.

最新推荐文章于 2024-02-16 21:44:50 发布

阅读量2.3k

点赞数 1

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_33962481/article/details/118109039

版权

JavaScript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

文章目录

一、复制节点
- 复制节点
二、动态生成表格

一、复制节点

复制节点

语法 :

node.cloneNode()

返回调用该方法的节点的一个副本.

如果括号参数为空或者为false, 则是浅拷贝, 即只克隆复制节点本身, 不克隆里面的子节点.
如果括号参数为true, 则是深拷贝, 克隆复制节点本身和里面的子节点.

二、动态生成表格

<!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>Document</title>
    <style>
        a {
            color: red;
            text-decoration: none;
        }

        table {
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        table thead tr {
            background-color: #ccc;
            height: 40px;
        }

        tbody tr {
            background-color: skyblue;
        }
    </style>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        var data = [{
            name: '魏一诺',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '魏二诺',
            subject: 'JavaScript',
            score: 90
        }, {
            name: '魏三诺',
            subject: 'JavaScript',
            score: 80
        }, {
            name: '魏四诺',
            subject: 'JavaScript',
            score: 70
        }]

        var tbody = document.querySelector('tbody');
        // 动态创建行
        for (var i = 0; i < data.length; i++) {
            // 创建行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (key in data[i]) {
                // 创建列
                var td = document.createElement('td');
                tr.appendChild(td);
                td.innerHTML = data[i][key];
            }
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = "<a href='javascript:;'>删除</a>";
        }


        //获取元素

        var trs = document.querySelectorAll('tbody tr');

        for (var i = 0; i < trs.length; i++) {
            // 给最后一个td绑定事件
            var a = trs[i].lastElementChild.children[0];
            a.onclick = function () {
                // 点击删除
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

    </script>
</body>

</html>

学习中的小菜鸟.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - 操作元素 - 节点操作 - 复制节点

文章目录一、复制节点二、添加节点一、复制节点语法 :node.cloneNode()返回调用该方法的节点的一个副本.如果括号参数为空或者为false, 则是浅拷贝, 即只克隆复制节点本身, 不克隆里面的子节点.如果括号参数为true, 则是深拷贝, 克隆复制节点本身和里面的子节点.二、添加节点...
复制链接

扫一扫