如何用JavaScript实现按分组交替显示表格行？

核心思路是不再单纯依赖行号奇偶性，而是跟踪每行的company分组标识，当分组发生变化时切换背景色，确保同一分组内的所有行颜色一致，不同分组之间交替显示颜色。

实现代码 #

// 获取表格的所有数据行（优先取tbody内的行，避免表头被着色）
const tblRows = document.querySelectorAll('tbody tr');
// 记录上一行的company值，以及当前使用的颜色索引
let lastCompany = '';
let currentColorIdx = 0;
// 定义交替使用的背景色，可根据需求修改
const alternateColors = ['#ffffff', 'red'];

tblRows.forEach(row => {
    // 获取当前行的company值——这里假设company存储在该行的第二个<td>中，
    // 请根据你的表格实际结构调整选择器（比如用类名：row.querySelector('.company')）
    const currentCompany = row.querySelector('td:nth-child(2)').textContent.trim();
    
    // 如果当前行的company和上一行不同，切换颜色索引
    if (currentCompany !== lastCompany) {
        currentColorIdx = 1 - currentColorIdx;
        lastCompany = currentCompany;
    }
    
    // 为当前行设置背景色
    row.style.backgroundColor = alternateColors[currentColorIdx];
});

关键说明 #

• 选择器适配：如果你的表格里有专门存储company的单元格（比如带class="company"），把td:nth-child(2)换成.company会更可靠，避免因列顺序变动导致错误。
• 表头排除：用tbody tr代替tr可以只对数据行着色，避免表头被包含进去。
• 扩展性：如果需要更多种交替颜色，只需在alternateColors数组里添加颜色，同时调整颜色切换逻辑为currentColorIdx = (currentColorIdx + 1) % alternateColors.length即可。

对比你原来的代码，这个方案的核心是基于分组标识的变化触发颜色切换，而不是固定按行号奇偶判断，完全匹配你需要的分组交替效果。

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