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>