JavaScript中如何获取指定table表格的总行数

HTML 表格元素原生暴露的rows属性返回包含表格所有行的类数组集合，集合的length属性就是表格的实际总行数，直接用这个值替换循环里硬编码的上限3即可，不需要额外计算。

修正后的可运行代码 #

// 提前缓存表格节点，避免循环内重复查询DOM
const table = document.getElementById("table_st");
let subtitleContent = "";

// 用table.rows.length作为动态循环上限，自动适配任意行数的表格
for (let i = 0; i < table.rows.length; i++) {
  const rowCells = table.rows[i].cells;
  // 增加容错，避免某行列数不足3列时抛出JS错误
  const col1 = rowCells[0]?.innerHTML ?? "";
  const col2 = rowCells[1]?.innerHTML ?? "";
  const col3 = rowCells[2]?.innerHTML ?? "";
  subtitleContent += `${col1}   ${col2}   ${col3}\n`;
}

// 循环结束后一次性赋值，减少DOM重绘提升性能
subtitles.innerHTML = subtitleContent;

补充说明 #

• table.rows会统计表格内所有位置的行，包括<thead>、<tbody>、<tfoot>标签内部的<tr>。如果你只需要遍历正文区域的行，可以定位到对应tbody节点后再取行数，比如table.tBodies[0].rows.length就能获取第一个tbody块的总行数。
• 原代码每次循环都执行document.getElementById("table_st")查询DOM、每次都修改subtitles.innerHTML触发DOM重绘，在表格行数较多时会有明显性能问题，修正后的写法规避了这两个问题。
• 如果你的表格存在合并单元格的情况，cells.length返回的是当前行实际渲染的单元格数量，不会按列数补全，代码里的容错逻辑可以避免列数不足时的脚本报错。

内容的提问来源于stack exchange，提问作者dev