DOM操作技术-操作表格

最新推荐文章于 2021-11-22 08:51:39 发布

cake_eat

最新推荐文章于 2021-11-22 08:51:39 发布

阅读量269

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cake_eat/article/details/108749701

版权

JavaScript 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

为了方便构建表格，HTML DOM还为<table>、<tbody> 和<tr>元素添加了一些属性和方法。
在这里插入图片描述

例如：

//创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//将表格添加到文档主体中
document.body.appendChild(table);