HTML的aria-rowindex怎么在虚拟长表格中标当前行-html教程-PHP中文网

aria-rowindex必须动态计算全局行号而非写死，因虚拟滚动复用dom节点导致视觉位置与属性值错位；react中需基于原始数据索引（如start+index+1）更新，同时同步tabindex以保障键盘导航正确性。

html的aria-rowindex怎么在虚拟长表格中标当前行

aria-rowindex 不是“标当前行”的装饰属性，它是告诉屏幕阅读器“这个单元格在逻辑表格中属于第几行”的必要坐标。在虚拟长表格里，它必须和视觉位置严格一致，否则读屏会报错行号、跳行甚至卡死。

为什么直接写死 `aria-rowindex` 在虚拟滚动里会出错

虚拟滚动靠复用 DOM 节点来节省内存，比如只渲染可视区 + 缓冲区的 20 行，但数据总共有 10 万行。如果给每个 div 写死 aria-rowindex="5"，滚动后这个节点可能已挪到第 9876 行，而属性没更新——屏幕阅读器就会坚持说“这是第 5 行”，和眼睛看到的完全对不上。

常见错误现象：NVDA 报“第 1 行”，实际焦点停在第 124 行数据上；JAWS 连续播报同一行号多次
根本原因：DOM 复用后，aria-rowindex 没随数据索引重算
必须配合：每次渲染该节点时，动态计算其在完整数据中的逻辑行号（从 1 开始），再赋值

React 中怎么安全更新 `aria-rowindex`

不能靠 index（渲染序号），得用数据本身的全局位置。假设你用 useVirtualScroll 计算出当前渲染的是 data.slice(start, end)：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

const Row = ({ index, data }) => {
  // index 是 slice 后的局部索引
  const globalRowIndex = start + index + 1; // +1 因为 aria-rowindex 从 1 起
  return (
    <div role="row">
      <div role="gridcell" aria-rowindex="{globalRowIndex}" aria-colindex="1">
        {data[index].name}
      </div>
    </div>
  );
};