HTML | DOM 表数据对象

在 HTML 中，表格是一种常见的元素类型。读取、操作和修改表格中的数据是前端开发中非常常见和基础的操作。HTML | DOM 表数据对象将帮助程序员在 JavaScript 中轻松地访问和操作表格数据。

获取表格

通过 document.getElementsByName() 方法可以获取表格的 HTMLCollection。通过索引或 table 元素的 id 属性来访问表格。

// 通过索引获取表格并输出表格中的文本内容
var table = document.getElementsByTagName("table")[0];
console.log(table.textContent);

// 通过 id 获取表格并输出表格中的文本内容
var table = document.getElementById("myTable");
console.log(table.textContent);

获取表格的行和列

表格中的行和列都可以通过 HTML | DOM 表数据对象进行获取。

// 获取表格中第一行第二列，并设置该单元格的背景色为红色
var table = document.getElementById("myTable");
table.rows[0].cells[1].style.backgroundColor = "red";

// 获取表格的行数和列数
var rows = table.rows.length;
var cols = table.rows[0].cells.length;

遍历表格

HTML | DOM 表数据对象也可以用于遍历表格中的每一个单元格。

// 遍历表格并输出每个单元格的内容
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
  for (var j = 0; j < table.rows[i].cells.length; j++) {
    console.log(table.rows[i].cells[j].textContent);
  }
}

创建和修改表格

HTML | DOM 表数据对象还可以用于创建和修改表格。

// 创建一个新的表格和行
var table = document.createElement("table");
var row = document.createElement("tr");

// 创建并添加两个单元格
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.textContent = "Hello";
cell2.textContent = "World";
row.appendChild(cell1);
row.appendChild(cell2);

// 将行添加到表格中
table.appendChild(row);

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

// 修改表格中某个单元格的内容
var table = document.getElementById("myTable");
table.rows[0].cells[0].textContent = "New Content";

以上是 HTML | DOM 表数据对象的常用方法和操作，它们可以帮助我们更加轻松地操作和管理 HTML 中的表格数据。