骑行数据表格：为何无法获取第10个单元格的innerHTML？

问题根源 #

你遇到的Uncaught TypeError是因为当前遍历的表格行中不存在索引为10的单元格——要么是该行的单元格总数不足11个（索引从0开始计数），要么是表格行本身是非数据行（比如表头、合计行），或是单元格动态生成但代码执行时还未渲染完成。

具体解决步骤 #

1. 先判断单元格存在性再访问 #

在处理周二单元格前，先检查该行的单元格数量是否足够，或者直接判断目标单元格是否存在，避免报错：

// 遍历表格行示例
const rows = document.querySelectorAll('table tr');
rows.forEach(row => {
    // 处理周日（索引4）
    if (row.cells[4]) {
        // 你的高亮逻辑
    }
    // 处理周一（索引7）
    if (row.cells[7]) {
        // 你的高亮逻辑
    }
    // 处理周二（索引10）——先判断存在性
    if (row.cells.length > 10 && row.cells[10]) {
        const tuesdayContent = row.cells[10].innerHTML;
        // 执行室内/室外高亮逻辑
        if (tuesdayContent.includes('室内')) {
            row.cells[10].style.backgroundColor = '#e6f7ff';
        } else if (tuesdayContent.includes('室外')) {
            row.cells[10].style.backgroundColor = '#fff2e6';
        }
    }
});

2. 只遍历数据行，跳过表头/异常行 #

如果表格里有表头（<thead>）或合计行，这些行的单元格数量可能和数据行不一致，应该只遍历<tbody>里的有效数据行：

// 仅选择tbody内的行，避免处理表头
const dataRows = document.querySelectorAll('table tbody tr');
dataRows.forEach(row => {
    // 处理各日期单元格逻辑
});

3. 确认索引计算是否正确 #

手动核对表格的列顺序：从0开始数，周二对应的列是否确实是第11个单元格（索引10）。如果存在单元格合并（colspan属性），会导致row.cells的长度小于视觉上的列数，这时候可以通过列的类名/ID定位，替代索引依赖：

// 更可靠的方式：通过单元格的类名定位，比如周二列的单元格有类名tuesday-col
const tuesdayCell = row.querySelector('.tuesday-col');
if (tuesdayCell) {
    const content = tuesdayCell.innerHTML;
    // 高亮逻辑
}

4. 确保代码在表格渲染完成后执行 #

如果表格是动态加载的（比如通过AJAX获取数据后生成），要确保代码在DOM完全渲染后运行：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
    // 你的表格处理代码
});

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