动态生成表格

最新推荐文章于 2024-07-19 12:58:53 发布

Sea_water778

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量194

点赞数

文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/Sea_water778/article/details/122749878

版权

<!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>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        thead tr{
            background-color: rgb(190, 184, 184);
            height: 30px;
        }
        a{
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [{
            name: '看海的人',
            subject: 'JavaScript',
            score: 100
        },{
            name: '龚丽',
            subject: 'JavaScript',
            score: 99
        },{
            name: '傅亨',
            subject: 'JavaScript',
            score: 98
        },{
            name: '呜啦啦',
            subject: 'JavaScript',
            score: 89
        },
    ];
    var tbody = document.querySelector('tbody');
    for(var i = 0; i < datas.length; i++){
        // 1.创建行 tr
        var tr = document.createElement('tr');
        // 把tr 赋值给 tbody
        tbody.appendChild(tr);
        // 创建单元格
        for(var k in datas[i]){
            var td = document.createElement('td');
            // 把数组的属性值赋值给 td
            td.innerHTML = datas[i][k];
            // 把td 添加到tr中
            tr.appendChild(td);
        }
        // 添加删除单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href = "javascript:;">删除</a>'
        tr.appendChild(td);
    }
    // 删除表格行操作
    var as = document.querySelectorAll('a');
    for(var i = 0; i < as.length; i++){
        as[i].addEventListener('click',function(){
            tbody.removeChild(this.parentNode.parentNode)
        })
    }
    </script>
</body>
</html>

Sea_water778

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态生成表格

<!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>Do.
复制链接

扫一扫