aria-rowcount

aria-rowcount 属性定义表格、网格或树状网格中的总行数。

描述

有些表格包含数百行,甚至数百万行。即使对于行数较少的表格,也可能需要仅加载部分行,以满足设计要求、提高性能或改善用户体验。当仅加载部分行时,您需要让所有用户都知道仅显示了部分数据。aria-rowcount 属性用于定义表格、网格或树状网格中的总行数。

包含在 <table> 元素中或包含在具有 table 角色的元素中,该值是完整表格中的行数,以整数形式表示。如果总行数未知,请包含 aria-rowcount="-1",这将告知浏览器不要计算总行数。

如果所有行都已加载并在 DOM 中,则无需包含 aria-rowcount,因为浏览器会自动计算总行数。但是,如果行在任何时间都不存在于 DOM 中,则需要此属性在已知完整表格大小的情况下提供行数,并在未知总行数的情况下告知浏览器不要自动计算行数。

示例

以下示例显示了一个包含 24 行的网格,其中显示了第一行和第 7 行到第 9 行。

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">Goalkeeper</span>
    </div>
  </div>
</div>

<integer>

完整表格中的行数,或 -1(如果表格大小未知)。

关联接口

Element.ariaRowCount

ariaRowCount 属性是 Element 接口的一部分,它反映了 aria-rowcount 属性的值。

ElementInternals.ariaRowCount

ariaRowCount 属性是 ElementInternals 接口的一部分,它反映了 aria-rowcount 属性的值。

关联角色

用于角色

继承到角色中

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-rowcount

另请参阅