HTMLTableRowElement: rowIndex 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

HTMLTableRowElement 接口的只读属性 rowIndex 表示行在整个 <table> 中的位置。

即使 <thead>、<tbody> 和 <tfoot> 元素在 HTML 中顺序混乱，浏览器也会按正确的顺序渲染表格。因此，行数是从 <thead> 到 <tbody>，再从 <tbody> 到 <tfoot> 进行计数。

值

行的索引，如果该行不属于表格，则为 -1。

示例

本示例使用 JavaScript 为表格中的所有行号进行标记。

HTML

html

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$8</td>
    </tr>
    <tr>
      <td>Top Sirloin</td>
      <td>$20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$30</td>
    </tr>
  </tfoot>
</table>

JavaScript

const rows = document.querySelectorAll("tr");

rows.forEach((row) => {
  const z = document.createElement("td");
  z.textContent = `(row #${row.rowIndex})`;
  row.appendChild(z);
});

结果

规范

规范
HTML # dom-tr-rowindex-dev

浏览器兼容性

另见

HTMLTableRowElement.sectionRowIndex

帮助改进 MDN

了解如何贡献

此页面最后修改时间为 ⁨2024年5月1日⁩，由 MDN 贡献者进行修改。

在 GitHub 上查看此页面 • 报告此内容的错误