aria-rowindex

aria-rowindex 屬性定義了元素相對於表格、網格或樹狀網格中總行數的位置。

描述

有些表格有非常多的行。出於設計要求、提高效能或改善使用者體驗的考慮，可能只加載一小部分行。

當只加載了一部分行時，你需要讓所有使用者都知道正在顯示哪一部分行。aria-rowindex 屬性用於定義單元格或行的行索引或相對於表格、網格或樹狀網格中總行數的位置。

包含在 <tr> 元素中，或包含在具有 row 角色的元素中，或者直接包含在 <td>、<th> 或具有 cell 或 gridcell 角色的元素中，該值是行相對於整個表格的位置。

aria-rowindex 的值是一個大於或等於 1 的整數，大於任何先前行的 aria-rowindex 值，並且小於或等於整個表格中的行數。

如果所有行都被載入並且在 DOM 中，則不需要包含 aria-rowindex，因為瀏覽器會自動計算每行的索引。但是，當 DOM 中只存在一部分行時，需要使用 aria-rowindex 來指示每行相對於整個表格的位置。如果只加載了一部分行，你還需要在表格祖先元素上包含 aria-rowcount，即使你不知道總行數。

如果只包含一部分行的表格具有跨越多行的單元格，那麼行和單元格都需要設定 aria-rowspan。如果單元格跨越多行——當單元格角色包含 aria-rowspan 屬性或 HTML 單元格具有設定為大於 1 的值的 rowspan 屬性時——除了適當的行跨越屬性外，還要在跨越單元格中包含行的 aria-rowindex 值。該值應該是跨越開始的行索引。

注意：aria-rowindex 必須新增到每一行，但在單元格上是可選的，除了跨越行的單元格：aria-rowindex 屬性是跨越單元格上的必需屬性。

示例

以下示例顯示了一個包含 24 行的網格，其中顯示了第一行和第 7 行到第 10 行。最後一個“位置”單元格跨越第 9 列和第 10 列。

html

<div role="grid" aria-rowcount="24">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Position</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="7">
      <span role="gridcell">Morgan</span>
      <span role="gridcell">Brian</span>
      <span role="gridcell">Midfielder</span>
    </div>
    <div role="row" aria-rowindex="8">
      <span role="gridcell">Abby</span>
      <span role="gridcell">Dahlkemper</span>
      <span role="gridcell">Defender</span>
    </div>
    <div role="row" aria-rowindex="9">
      <span role="gridcell">Ashlyn</span>
      <span role="gridcell">Harris</span>
      <span role="gridcell" aria-rowspan="2" aria-rowindex="9">Goalkeeper</span>
    </div>
    <div role="row" aria-rowindex="10">
      <span role="gridcell">Alyssa</span>
      <span role="gridcell">Naeher</span>
    </div>
  </div>
</div>