动态生成表格以及删除表格_生成工作表清单并可选择删除工作表的代码-CSDN博客

本文链接：https://blog.csdn.net/HX7_L/article/details/126217256

动态生成表格以及删除当任意表格，一些不易理解的都在后面进行了注释，新人小白和大家一起学习，代码里面有css和html和js，看需要求复制就行

<style>
     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>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
<script>
    //获取元素
    var tbody = document.querySelector('tbody')//首先获取需要用到的
    var dates = [{
            nema: '小明',
            subjet: 'javaspirct',
            score: '88'
        }, {
            nema: '小刘',
            subjet: 'javaspirct',
            score: '88'
        }, {
            nema: '小王',
            subjet: 'javaspirct',
            score: '88'
        },{
            nema: '老六',
            subjet: 'javaspirct',
            score: '100'
        }]//这是数据
        for(var i = 0 ; i<dates.length;i++){//根据数据的长度来对tr进行创建
            var tr = document.createElement('tr')//创建tr这个标签
            tbody.appendChild(tr) //把tr这个标签放在tbody中
            for(var k in dates[i]){ //有多少个对象就有多少个td
                var td = document.createElement('td') //生成td这个标签
                tr.appendChild(td) //把td放在tr里面
                td.innerHTML= dates[i][k] //把每个对象里面的k也就是每个方法里面的属性值放进表单
            }
            var td = document.createElement('td')          
            td.innerHTML= '<a href="javaSpirct:;">删除</a>' 
            tr.appendChild(td)
        }
        //因为删除是单独的一个标签所以要把他放在第一个for循环的外面
        var as = document.querySelectorAll('a')
        for(var i = 0 ;i<as.length;i++){
            as[i].onclick=function(){
                tbody.removeChild(this.parentNode.parentNode) //这一步是为了在tbody里面删除当前点击元素父级的父级也就是tr
            }
           
        }
</body>