HTMLTableRowElement:sectionRowIndex 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLTableRowElement 接口的 sectionRowIndex 只读属性表示当前部分(<thead><tbody><tfoot>)的行位置。

返回该行的索引,如果该行不属于表的一部分,则返回 -1

示例

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

HTML

html
<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>香蕉</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>橘子</td>
      <td>$8</td>
    </tr>
    <tr>
      <td>西冷牛排</td>
      <td>$20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>$30</td>
    </tr>
  </tfoot>
</table>

JavaScript

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

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

结果

规范

Specification
HTML Standard
# dom-tr-sectionrowindex

浏览器兼容性

BCD tables only load in the browser

参见