js动态创建表格--细解

最新推荐文章于 2023-02-06 19:13:34 发布

扑通游历记

最新推荐文章于 2023-02-06 19:13:34 发布

阅读量238

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_63813622/article/details/127714231

版权

不会数据库导入数据，用对象生成数据

大家可以参考一下

毕竟我也是看了两遍才会的

<body>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        //用对象来装所有的数据
        var dates = [
            {
                anme: '小狗蛋',
                subject: 'javascript',
                score: 100
            }, {
                anme: '大狗但',
                subject: 'javascript',
                score: 100
            }, {
                anme: '蛋儿',
                subject: 'javascript',
                score: 100
            }, {
                anme: '小狗蛋',
                subject: 'c##',
                score: 100
            }, {
                anme: '小狗蛋',
                subject: 'java',
                score: 100
            }, {
                anme: '小狗蛋',
                subject: 'c++',
                score: 100
            }
        ]
        //  1、创建行  
        var tbody = document.querySelector('tbody');
        //创建几行是由对象属性的个数所决定的 所以用dates.length来Jon控制for循环次数
        for (var i = 0; i < dates.length; i++) {
            //创建行tr
            var tr = document.createElement('tr');
            tbody.appendChild(tr);//添加到tbody里面
            //2、创建列  遍历对象属性 才可以确定创建几列
            for (var k in dates[i]) {
                var td = document.createElement('td');
                td.innerHTML = dates[i][k];//k获取的是属性值 所以就是dates[i]的第k个属性值
                tr.appendChild(td);
            }
            //创建‘删除’行
            var td = document.createElement('td');
            //将‘删除’两字写入行内
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }

        var as = document.querySelectorAll('a');//要把所有a都获取过来
        for (var i = 0; i < as.length; i++) {
            //a的触发事件
            as[i].onclick = function () {
                //点击a要删除行tr 要用tr的父元素tbody，tr又是a的爸爸的爸爸
                tbody.removeChild(this.parentNode.parentNode);
            }
        }


    </script>
</body>