使用 JavaScript 和 DOM 接口遍历 HTML 表格

本文概述了一些强大的，基本的 DOM 1 级别中的方法以及如何在 JavaScript 中使用它们。你将会如何动态地创建、访问、控制以及移除 HTML 元素。这里提到的 DOM 方法，并非是 HTML 专有的；它们在 XML 中同样适用。这里提供的演示在任何现代浏览器中都能正常工作。

备注：这里介绍的 DOM 方法是文档对象模型 1 级规范核心的一部分。DOM 1 级既包括通用的文档访问和操作的方法（DOM 1 核心），也包括专门针对 HTML 文档的方法（DOM 1 HTML）。

动态创建 HTML 表格

示例

在本示例中，当按钮被点击时，会向页面中添加一个表格。

HTML

html

<input type="button" value="生成表格" onclick="generateTable()" />

JavaScript

function generateTable() {
  // 创建一个 <table> 元素和一个 <tbody> 元素
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // 创建单元格
  for (let i = 0; i < 2; i++) {
    // 创建一行
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // 创建 <td> 元素和文本节点，文本节点是 <td> 的内容，并将 <td>
      // 放在表格最后一行
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // 将该行添加到表格的末尾
    tblBody.appendChild(row);
  }
  // 将 <tbody> 放置在 <table> 内
  tbl.appendChild(tblBody);
  // 将 <table> 放置在 <body> 内
  document.body.appendChild(tbl);
  // 将 tbl 的 border 属性设置为 '2'
  tbl.setAttribute("border", "2");
}

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

结果

解释

注意我们创建元素和文本节点的顺序：

首先我们创建了 <table> 元素。
然后，我们创建了 <table> 的子元素 <tbody>。
然后，我们使用循环语句创建了 <tbody> 的子元素，<tr>。
对于每一个 <tr> 元素，我们使用一个循环语句创建它的子元素 <td>。
对于每一个 <td> 元素，我们创建单元格内的文本节点。

现在，我们创建了 <table>、<tbody>、<tr> 和 <td> 等元素，然后创建了文本节点；接下来，我们将每一个对象逆序地接在各自的父节点上：

首先，我们使用这段代码将每一个文本节点接在 <td> 元素上。
js
```
cell.appendChild(cellText);
```
然后，我们将每一个 <td> 元素接在它的父元素 <tr> 上。
js
```
row.appendChild(cell);
```
然后，我们将每一个 <tr> 元素接在它的父元素 <tbody> 上。
js
```
tblBody.appendChild(row);
```
下一步，我们将 <tbody> 元素接在它的父元素 <table> 上。
js
```
tbl.appendChild(tblBody);
```
最后，我们将 <table> 元素接在它的父元素 <body> 上。
js
```
document.body.appendChild(tbl);
```

请记住这个机制。你将会在 W3C DOM 编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。

下面是由 JavaScript 代码生成的 HTML 代码：

html

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

下面是由代码生成的 <table> 及其子元素的 DOM 对象树：

一个 DOM 对象树是如何从主元素和它的子元素生成的

你只需使用一些 DOM 方法就可以建立这个表及其内部子元素。记住要牢记你打算创建的结构的树形模型；这将使你更容易写出必要的代码。在图 1 的 <table> 树中，元素 <table> 有一个子节点：元素 <tbody>。<tbody> 有两个子节点。每个 <tbody> 的子节点（<tr>）有两个子节点（<td>）。最后，每个 <td> 有一个子节点：一个文本节点。

设置段落的背景颜色

示例

在本示例中，当按钮被点击时，段落的背景颜色将会改变。

HTML

html

<body>
  <input type="button" value="设置段落背景颜色" onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

JavaScript

function setBackground() {
  // 获取文档中所有的 p 元素
  const paragraphs = document.getElementsByTagName("p");

  // 从列表中获取第二个元素
  const secondParagraph = paragraphs[1];

  // 设置内联样式
  secondParagraph.style.background = "red";
}

结果

解释

getElementsByTagName(tagNameValue) 是任何 DOM Element 或根 Document 元素中的一个方法。当被调用时，它返回一个数组，其中包含所有与标签名称相匹配的元素的后代。列表中的第一个元素位于数组中的 [0] 位置。

我们进行了以下步骤：

首先，我们获取了文档中所有的 p 元素：

const paragraphs = document.getElementsByTagName("p");

然后，我们从 p 元素的列表中获取了第二个段落元素：
js
```
const secondParagraph = paragraphs[1];
```
最后，我们使用 paragraph 对象的 style 属性，将背景色设置为红色：
js
```
secondParagraph.style.background = "red";
```

使用 document.createTextNode("..") 创建文本节点

使用文档对象来调用 createTextNode 方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个代表那个文本节点信息的对象。

myTextNode = document.createTextNode("world");

这表示你已经创建了一个 TEXT_NODE（一个文字片断）类型的节点，并且它的内容是 "world"，任何你对 myTextNode 的引用都指向这个节点对象。如果想将这个文本插入到 HTML 页面中，你还需要将它作为其他节点元素的子元素。

使用 appendChild(..) 插入元素

那么，通过调用 secondParagraph.appendChild(node_element) 你可以将这个元素设置成为第二个 <p> 元素的一个新的子元素。

secondParagraph.appendChild(myTextNode);

在测试了这个例子之后，我们注意到，hello 和 world 单词被组合在了一起：helloworld。事实上，当你看到 HTML 页面时，hello 和 world 两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式是两个节点。第二个节点是一个 TEXT_NODE 类型的新节点，也是第二个 <p> 标签的第二个子元素。下面的示意图将在文档树中展示最近创建的文本节点对象。

段落元素中的文本节点作为 DOM 树中的单独子元素

备注： createTextNode() 和 appendChild() 是在 hello 和 world 这两个词之间加入空白的简单方法。另一个重要的注意点是，appendChild 方法将在最后一个子节点之后追加子节点，就像 world 这个词已经被添加到 hello 这个词之后一样。因此，如果你想在 hello 和 world 之间追加一个文本节点，你需要使用 insertBefore 而不是 appendChild。

使用文档对象和 createElement(..) 方法创建新的元素

你可以使用 createElement 来创建新的 HTML 元素或者任何其他你想要的元素。比如，如果你想要创建一个新的 <p> 元素作为 <body> 的子元素，你可以使用前面例子的 myBody 并给它附加一个新的元素节点。使用 document.createElement("tagname") 可以方便的创建一个节点。如下：

myNewPTagNode = document.createElement("p");
myBody.appendChild(myNewPTagNode);

如何将一个新的节点元素附加到文档树内的文本节点对象上

使用 removeChild(..) 方法移除节点

每一个节点都可以被移除。下面的代码从第二个 <p> 元素 secondParagraph 中移除文本节点 myTextNode（其中包含单词“world”）。

secondParagraph.removeChild(myTextNode);

文本节点 myTextNode（包含单词“world”）仍然存在。下面的代码将 myTextNode 附加到最近创建的 <p> 元素，myNewPTagNode。

myNewPTagNode.appendChild(myTextNode);

被修改的对象树的最后的状态如下：

创建并向对象树文本结构追加一个新的节点元素

动态创建一个表格（回到 Sample1.html）

这一段落的剩余部分我们将继续修改我们的 sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。

回顾 HTML 表格结构

添加新节点元素后的 HTML 表格对象树结构

创建元素节点并将它们插入到文档树中

sample1.html 中创建表格的基本步骤是：

获得 body 对象（文档对象的第一个元素）
创建所有元素。
最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的 sample1.html

备注：在 start 函数的最后，有一行新的代码。该表的 border 属性是用另一个 DOM 方法 setAttribute() 设置的。setAttribute() 有两个参数：属性名和属性值。你可以使用 setAttribute 方法设置任何元素的任何属性。

html

<html lang="zh-CN">
  <head>
    <title>示例代码——使用 JavaScript 和 DOM 接口遍历 HTML 表格</title>
    <script>
      function start() {
        // 获取 body 的引用
        const myBody = document.getElementsByTagName("body")[0];

        // 创建 <table> 和 <tbody> 元素
        const myTable = document.createElement("table");
        const myTableBody = document.createElement("tbody");

        // 创建单元格
        for (let j = 0; j < 3; j++) {
          // 创建一个 <tr> 元素
          const myCurrentRow = document.createElement("tr");

          for (let i = 0; i < 4; i++) {
            // 创建一个 <td> 元素
            const myCurrentCell = document.createElement("td");
            // 创建文本节点
            const currentText = document.createTextNode(
              `cell is row ${j}, column ${i}`,
            );
            // 将文本节点附加至 <td> 中
            myCurrentCell.appendChild(currentText);
            // 将单元格 <td> 附加至行 <tr> 中
            myCurrentRow.appendChild(myCurrentCell);
          }
          // 将行 <tr> 附加至 <tbody> 中
          myTableBody.appendChild(myCurrentRow);
        }

        // 将 <tbody> 附加至 <table> 中
        myTable.appendChild(myTableBody);
        // 将 <table> 附加至 <body> 中
        myBody.appendChild(myTable);
        // 将 myTable 的 border 属性设为 2
        myTable.setAttribute("border", "2");
      }
    </script>
  </head>
  <body onload="start()"></body>
</html>

使用 CSS 和 DOM 来操作表格

从表格中获得一个文字节点

示例介绍了两个新的 DOM 属性。首先，使用 childNodes 属性来获得 myCell 的孩子节点列表。childNodes 列表包括所有的孩子节点，无论它们的名称或类型是什么。像 getElementsByTagName() 一样，它返回了一个节点列表。

不同的是，getElementsByTagName() 只返回指定标签名称的元素，且它会返回任何级别的后代，而不仅仅是直接子元素。

一旦你获得了返回的列表，你可以使用 [x] 方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的 myCellText 中保存了一个文字节点。

然后，为了显示本例中的结果，它创建了一个新的文本节点，其内容是 myCellText 的数据，并将其作为 <body> 元素的一个子节点进行附加。

备注：如果你的对象是一个文字节点，你可以使用 data 属性来获取节点的文字内容。

myBody = document.getElementsByTagName("body")[0];
myTable = myBody.getElementsByTagName("table")[0];
myTableBody = myTable.getElementsByTagName("tbody")[0];
myRow = myTableBody.getElementsByTagName("tr")[1];
myCell = myRow.getElementsByTagName("td")[1];

// myCell 子节点列表中的第一个元素
myCellText = myCell.childNodes[0];

// currentText 的内容是 myCellText 的数据内容
currentText = document.createTextNode(myCellText.data);
myBody.appendChild(currentText);

获得属性的值

在 sample1 的最后我们在 myTable 对象上调用了 setAttribute。这个调用是用来设置表格的边框属性的。为了获取属性的值，需要使用 getAttribute 方法：

myTable.getAttribute("border");

通过改变样式属性来隐藏一列

一旦你在你的 JavaScript 变量中保存了一个对象，你就可以直接为它设置 style 属性。下面的代码是修改后的 sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，style 属性是被直接设置的。

html

<html lang="zh-CN">
  <body onload="start()"></body>
  <script>
    function start() {
      const myBody = document.getElementsByTagName("body")[0];
      const myTable = document.createElement("table");
      const myTableBody = document.createElement("tbody");

      for (let row = 0; row < 2; row++) {
        const myCurrentRow = document.createElement("tr");
        for (let col = 0; col < 2; col++) {
          const myCurrentCell = document.createElement("td");
          const currentText = document.createTextNode(`cell is: ${row}${col}`);
          myCurrentCell.appendChild(currentText);
          myCurrentRow.appendChild(myCurrentCell);
          // 如果列值为 0，设置单元格背景颜色
          // 如果列值为 1，隐藏单元格
          if (col === 0) {
            myCurrentCell.style.background = "rgb(255, 0, 0)";
          } else {
            myCurrentCell.style.display = "none";
          }
        }
        myTableBody.appendChild(myCurrentRow);
      }
      myTable.appendChild(myTableBody);
      myBody.appendChild(myTable);
    }
  </script>
</html>