实现动态生成表格效果

最新推荐文章于 2024-07-20 23:54:17 发布

别爱妹妹了

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量66

点赞数

文章标签：角色法术法力元素删除

本文链接：https://blog.csdn.net/m0_69190401/article/details/124082234

版权

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>角色</th>
                <th>法术</th>
                <th>法力</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
    <script>
        var datas = [{
            // 角色
            name: '闻人翊悬',
            // 法术
            magic: '火系',
            // 法力
            mana: 85
        }, {
            name: '申屠子夜',
            magic: '水系',
            mana: 80
        }, {
            name: '公仪楚人',
            magic: '土系',
            mana: 85
        }, {
            name: '容成墨熙',
            magic: '木系',
            mana: 90
        }, {
            name: '轩辕神君',
            magic: '金系',
            mana: 100
        }, {
            name: '小新',
            magic: '童系',
            mana: 100
        },{
            name:'小王子',
            magic: '童系',
            mana:90
        }];
        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 herf="#">删除</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>
</body>