HTMLTableRowElement: rowIndex プロパティ

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.rowIndex は読み取り専用プロパティで、表 (<table>) 全体に対する行の相対的な位置を表します。

<thead><tbody><tfoot> の各要素が HTML の中で順不同であっても、ブラウザーは表を正しい順序で描画します。従って行のカウントは <thead> から <tbody> へ、 <tbody> から <tfoot> へと進みます。

行の位置を返します。行が表に所属していない場合は -1 です。

この例は、 JavaScript を使用して表のすべての行に行番号を振ります。

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
let rows = document.querySelectorAll("tr");

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

結果

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rowIndex

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support