JavaScript-筑基（十二）节点操作之动态生成表格案例、三种动态创建元素区别

最新推荐文章于 2022-11-05 17:26:31 发布

superfortunate

最新推荐文章于 2022-11-05 17:26:31 发布

阅读量270

点赞数 2

分类专栏： JavaScript知识点详细学习笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_59598992/article/details/122422091

版权

本文介绍如何使用JavaScript动态生成表格，通过数组对象模拟数据并循环创建多个表格行，包含删除操作。探讨了动态创建元素的三种方法：document.write、innerHTML和createElement，分析了它们的效率和适用场景，建议在需要创建多个元素时，使用数组形式拼接以提高效率。

摘要由CSDN通过智能技术生成

这里我们先模拟数据，采取数组对象形式储存

 var datas = [
        {
            name:'中观',
            subject:'java',
            score:100
        },{
            name:'信安',
            subject:'java',
            score:60
        },{
            name:'常常',
            subject:'javascript',
            score:98
        }];

所有的数据都是放到tbody里面的行里面，通过循环创建多个行

   var tbody = document.querySelector('tbody');
        for(var i = 0; i < datas.length; i++) {
            //创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数
            for(var k in datas[i] ) {// 遍历数组对象
                var td = document.createElement('td');
                //创建了单元格的同时把属性值 赋给 td
                //console.log(datas[i][k]);     //