Javascript遍历Html Table示例(包括内容和属性值)

下面是 Javascript 遍历 HTML Table 的完整攻略：

1. HTML Table

首先，我们需要一个 HTML Table，我们可以通过以下代码来创建一个 3 行 3 列的表格，其中每个单元格都有一个 class 属性为 "cell"：

<table border="1">
  <tr>
    <td class="cell">1</td>
    <td class="cell">2</td>
    <td class="cell">3</td>
  </tr>
  <tr>
    <td class="cell">4</td>
    <td class="cell">5</td>
    <td class="cell">6</td>
  </tr>
  <tr>
    <td class="cell">7</td>
    <td class="cell">8</td>
    <td class="cell">9</td>
  </tr>
</table>

2. Javascript 遍历 Table

2.1. 遍历 Table 所有单元格

我们可以使用 JavaScript 和 DOM API 来遍历我们的 HTML Table。以下是如何遍历所有单元格的示例代码：

// 获取表格
var table = document.getElementsByTagName("table")[0];

// 遍历所有行
for (var i = 0, row; row = table.rows[i]; i++) {

  // 遍历行中的所有单元格
  for (var j = 0, cell; cell = row.cells[j]; j++) {
    console.log(cell.innerHTML);
  }
}

2.2. 获取 Table 中特定单元格的内容和属性值

如果你想获取表格中特定单元格的内容和属性值，我们可以使用以下代码：

// 获取表格
var table = document.getElementsByTagName("table")[0];

// 获取第 1 行第 2 列的单元格
var row = table.rows[0];
var cell = row.cells[1];

// 获取单元格的内容和 class 属性值
var content = cell.innerHTML;
var className = cell.className;
console.log("内容：" + content + "，class：" + className);

以上就是 Javascript 遍历 HTML Table 的完整攻略，其中包含了两个示例说明。