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>