表格动态生成及删除行操作

最新推荐文章于 2023-01-24 15:30:57 发布

炒米像啥

最新推荐文章于 2023-01-24 15:30:57 发布

阅读量179

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/chaomi_didi/article/details/109209079

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse:collapse;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }
        thead th,
        tbody td{
            height: 30px;
            border: 1px solid #333;
            font-size: 14px;
            font-family: serif;
        }
        thead th {
            background-color: #ccc;
            font-size: 16px;
            font-weight: 800;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="score_sheet">
        <table cellspacing=0 >
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>分数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        // 对象存储数据
        // 1、先准备好学生数据，用数组存储对象，用都好隔开
        var datas = [{
            name:'迪迪',
            subject:'JS',
            score:'100',
        },{
            name:'迪迪1',
            subject:'JS',
            score:'100',
        },{
            name:'迪迪2',
            subject:'JS',
            score:'100',
        },{
            name:'迪迪3',
            subject:'JS',
            score:'100',
        },{
            name:'迪迪4',
            subject:'JS',
            score:'98',
        }
        ]
        // 2、在tbody里创建行，有几个人（datas数组的length）我们就创建几行
        var tbody = document.querySelector('tbody');
        for ( var i = 0; i < datas.length; i++) {
            // 创建tr元素
            var tr = document.createElement('tr');
            // 在tr父元素内添加节点
            tbody.appendChild(tr);
            // 3、在tr内创建td,td个数取决于对象属性个数，for循环遍历对象 for ( k in obj)，k是属性名
            for (k in datas[i]) {
                // 创建单元格
                var td = document.createElement('td');
                tr.appendChild(td);
                td.innerHTML = datas[i][k];
            }
            // 4、创建操作单元格
            var td = document.createElement('td')
            td.innerHTML = '<a href = "javascript:">删除</a>';
            tr.appendChild(td);
        }
        // 5、点击删除按钮删除当前行
        // var tr = document.getElementsByTagName('tr');
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击删除a所在的行，a的父元素为td，td的父元素为tr，因此被删除的对象应该为this.parentNode.parentNode
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>
</html>

炒米像啥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格动态生成及删除行操作

```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { .
复制链接

扫一扫