HTML | DOM 表对象

HTML | DOM 表对象是网页中用于排列和展示数据的重要元素之一。在HTML中，表对象（Table Element）是由<table>标签表示的，它可以包含若干行<tr>标签，每行中包含若干个<td>标签表示单元格。除此之外，还有一些用于表头和表尾部分的标签。

在JavaScript中，我们可以使用DOM（Document Object Model）来操作表对象，从而实现对数据的增删改查等操作。本篇文章将会介绍DOM中针对表对象的一些常用API。

获取表对象

我们可以通过以下方法获取HTML文档中的表对象。

let table = document.getElementById("tableId");
let tableArr = document.getElementsByTagName("table");
let tableArr2 = document.querySelectorAll("table");

以上三种方式分别通过id、标签名和CSS选择器获取表对象，它们返回的都是包含了整个<table>标签的DOM元素对象。如果文档中有多个表格，后两种方法会返回一个包含多个元素的HTMLCollection对象或NodeList对象。

获取表头和表身

一般而言，表格的第一行是表头，而其余每一行是表身。我们可以通过以下方法获取表对象中的表头和表身。

let table = document.getElementById("tableId");
let thead = table.tHead; // 获取表头元素对象
let tbody = table.tBodies[0]; // 获取第一个表身元素对象

需要注意的是，tBodies属性返回的是一个HTMLCollection对象，而不是单独的元素对象。如果我们只需要访问第一个表身，可以使用[0]获取其中的元素对象。

遍历表格

我们可以通过以下循环语句遍历表格中的行和单元格。

let table = document.getElementById("tableId");
let rows = table.rows; // 获取所有行

for(let i=0; i<rows.length; i++) { // 遍历每一行
  let cells = rows[i].cells; // 获取当前行的所有单元格
  for(let j=0; j<cells.length; j++) { // 遍历每个单元格
    let cell = cells[j];
    // 使用cell的相关属性和方法
  }
}

以上代码可以遍历整个表格。由于表头也是一个特殊的行，我们也可以将其包含进去。

创建表格

我们可以通过以下方法动态创建表格、行与单元格。

let table = document.createElement("table"); // 创建table元素对象 

// 添加表头
let thead = table.createTHead(); // 创建表头元素对象
let headRow = thead.insertRow(0); // 插入第一行表头行
let headCell1 = headRow.insertCell(-1); // 插入表头单元格
headCell1.innerHTML = "Column1";
let headCell2 = headRow.insertCell(-1);
headCell2.innerHTML = "Column2";

// 添加表身
let tbody = table.createTBody(); // 创建一个表身元素对象
for(let i=0; i<data.length; i++) { // 插入多行数据
  let row = tbody.insertRow(-1); // 插入空行
  let cell1 = row.insertCell(-1); // 插入单元格
  cell1.innerHTML = data[i].column1Data; // 设置单元格文本
  let cell2 = row.insertCell(-1);
  cell2.innerHTML = data[i].column2Data;
}

document.body.appendChild(table); // 在文档中添加表格元素对象

以上代码演示了如何动态创建表格、表头和表身，并将其添加到HTML文档中。如果需要对表格进行进一步操作，我们可以使用之前介绍的表对象API。