如何用JavaScript依次遍历表格thead、tbody、tfoot行

报错“rows is not defined”是因为未正确定位到表格各区域的rows集合。以下是修正后的函数，可分别遍历<thead>、<tbody>、<tfoot>的行并实现样式设置（你可替换样式代码为实际业务逻辑）：

function ColorBoxes() {
  // 获取目标表格（示例用id选择，可根据实际修改选择器，比如querySelector('table')）
  const table = document.getElementById('targetTable');
  if (!table) return; // 表格不存在时直接返回，避免后续报错

  // 遍历thead行，设置红色背景
  const theadRows = table.tHead.rows;
  for (let i = 0; i < theadRows.length; i++) {
    theadRows[i].style.backgroundColor = 'red';
    // 此处插入你的实际业务逻辑
  }

  // 遍历tbody行，设置绿色背景（若有多个tbody，可循环处理table.tBodies数组）
  const tbodyRows = table.tBodies[0].rows;
  for (let i = 0; i < tbodyRows.length; i++) {
    tbodyRows[i].style.backgroundColor = 'green';
    // 此处插入你的实际业务逻辑
  }

  // 遍历tfoot行，设置黄色背景（先判断tfoot是否存在，避免无表尾时报错）
  const tfoot = table.tFoot;
  if (tfoot) {
    const tfootRows = tfoot.rows;
    for (let i = 0; i < tfootRows.length; i++) {
      tfootRows[i].style.backgroundColor = 'yellow';
      // 此处插入你的实际业务逻辑
    }
  }
}

核心修正说明： #

• 先明确获取目标表格元素，避免全局查找失败的问题
• 正确访问各区域的行集合：
  • 表头行：table.tHead.rows
  • 表体行：table.tBodies[0].rows（表格默认自带一个tbody，多tbody场景可遍历tBodies数组）
  • 表尾行：先判断table.tFoot是否存在，再访问其rows集合
• 通过循环逐行处理，确保每一行都能执行自定义逻辑

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