动态生成表格

最新推荐文章于 2022-11-24 16:14:03 发布

f_3345938485

最新推荐文章于 2022-11-24 16:14:03 发布

阅读量198

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/f_3345938485/article/details/124161056

版权

运行代码：

 <style>
        a {
            text-decoration: none;
        }
        
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
  
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>角色</th>
                <th>法术</th>
                <th>法力</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格数据动态生成 -->
            <!-- <tr>
                <td></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var datas = [{
            name:'神里绫人',
            magic:'水系',
            mana:85
        },{
            name:'八重神子',
            magic:'雷系',
            mana:90
        },{
            name:'钟离',
            magic:'岩系',
            mana:97
        },{
            name:'班尼特',
            magic:'火系',
            mana:98
        },{
            name:'重云',
            magic:'冰系',
            mana:86
        },{
            name:'枫原万叶',
            magic:'风系',
            mana:99
        }];
        console.log(datas.length);
        var tbody = document.querySelector('tbody');
        for(var i = 0; i < datas.length; i++){
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for(var k in datas[i]){
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                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].onclick = function(){
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
        }
        
    </script>

运行效果：

f_3345938485

关注

0
点赞
踩
0

收藏

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

运行代码： <style> a { text-decoration: none; } table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; }
复制链接

扫一扫