DOM创建表格

最新推荐文章于 2022-04-19 12:32:23 发布

Silent_crab

最新推荐文章于 2022-04-19 12:32:23 发布

阅读量465

点赞数

分类专栏：前端 JavaScript 文章标签： dom js

本文链接：https://blog.youkuaiyun.com/Silent_crab/article/details/119834506

版权

前端同时被 2 个专栏收录

36 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

HTML DOM 给 <table> <tbody> <tr>元素添加了一些属性和方法。
也就是<table> <tbody> <tr>，你是要用appendChild创建的，其它增删改查，可以用这些方法。

table:
在这里插入图片描述
tbody:

tr

现在准备利用上面的方法创建一个这样的表格

newTable.createCaption().appendChild(document.createTextNode("Caption"));
let newTBody = document.createElement('tbody');


let arrTitle=['姓名','年龄','职业','工资'];
let p1 = ['小明','43','老师','5000'];
let p2 = ['小李','30','财务','4000'];
for( let i=0; i<3;i++){
    newTBody.insertRow(i);
    for(let j=0;j<4;j++){
        if(i==0){             newTBody.rows[i].insertCell(j).appendChild(document.createTextNode(arrTitle[j]));
        }
        if(i==1){         newTBody.rows[i].insertCell(j).appendChild(document.createTextNode(p1[j]));
        }
        if(i==2){         newTBody.rows[i].insertCell(j).appendChild(document.createTextNode(p2[j]));
        }
    }
}
newTable.appendChild(newTBody);
document.body.appendChild(newTable);

中文可能会出现乱码，要改成UTF-8