JavaScript 中如何获取 tr

在网页开发中，经常需要使用 JavaScript 来操作表格中的行（tr 元素）。无论是读取表格数据、动态添加或删除行，获取 tr 元素都是关键的第一步。下面将介绍几种在 JavaScript 中获取 tr 的常见方法。

通过 document.getElementsByTagName 方法：这是一种直接且常用的方式。假设网页中有一个 id 为 “myTable” 的表格，代码如下：

<table id="myTable">
  <tr>
    <td>数据1</td>
  </tr>
  <tr>
    <td>数据2</td>
  </tr>
</table>

在 JavaScript 中，可以这样获取所有的 tr 元素：

var table = document.getElementById("myTable");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
  console.log(trs[i]);
}

getElementsByTagName 方法会返回一个包含所有匹配元素的 HTMLCollection 对象，通过循环可以遍历并操作每一个 tr 元素。

使用 querySelectorAll 方法：querySelectorAll 方法提供了更强大的选择能力，它可以使用 CSS 选择器来匹配元素。获取表格中所有 tr 元素的代码如下：

var trs = document.querySelectorAll('#myTable tr');
for (var i = 0; i < trs.length; i++) {
  console.log(trs[i]);
}

这种方式的优势在于可以使用各种 CSS 选择器进行更精准的筛选，比如获取特定类名的 tr 元素：document.querySelectorAll('#myTable tr.specialClass')。

通过表格的 rows 属性：表格元素本身有一个 rows 属性，它直接返回表格中的所有行。代码如下：

var table = document.getElementById("myTable");
var trs = table.rows;
for (var i = 0; i < trs.length; i++) {
  console.log(trs[i]);
}

rows 属性返回的是一个 HTMLCollection，同样可以通过循环来访问每一个 tr 元素。

在实际应用中，要根据具体的需求选择合适的方法。如果只需要获取表格中的所有行，rows 属性或 getElementsByTagName 方法可能更简单直接；而如果需要使用复杂的 CSS 选择器进行筛选，则 querySelectorAll 方法会更合适。掌握这些获取 tr 元素的方法，能让我们在进行表格相关的 JavaScript 编程时更加得心应手，高效地实现各种功能。