如何为具有相同值的动态表格行设置不同背景色？

我明白你想要的效果：把表格中roll列值相同的行归为一组，每组用不同的背景色区分，让表格数据看起来更清晰易读。下面是直接可用的实现方案！

完整实现代码 #

HTML（基于你提供的结构补全示例） #

<table border="1">
  <tr>
    <th>roll</th>
    <th>name</th>
    <th>Random number</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>42</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Name 2</td>
    <td>17</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 3</td>
    <td>99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 4</td>
    <td>33</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 5</td>
    <td>56</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 6</td>
    <td>72</td>
  </tr>
</table>

JavaScript 核心逻辑 #

// 等待页面元素加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('table');
  // 只选中数据行，跳过表头
  const dataRows = table.querySelectorAll('tr:not(:first-child)');
  // 定义可循环使用的背景色数组，可根据需求添加更多颜色
  const groupColors = ['#f0f5f9', '#e4e9f2'];
  
  let lastRollValue = null;
  let currentColorIndex = 0;

  dataRows.forEach(row => {
    // 获取当前行的roll值（取第一个单元格的内容）
    const currentRoll = row.querySelector('td:first-child').textContent.trim();
    
    // 当roll值变化时，切换背景色
    if (currentRoll !== lastRollValue) {
      // 用取模实现颜色循环切换，适配任意多组数据
      currentColorIndex = (currentColorIndex + 1) % groupColors.length;
      lastRollValue = currentRoll;
    }
    
    // 给当前行设置对应背景色
    row.style.backgroundColor = groupColors[currentColorIndex];
  });
});

逻辑说明 #

• DOM加载监听：避免页面未加载完成就执行代码，导致找不到表格元素的问题
• 行筛选：精准选中数据行，不影响表头样式
• 颜色循环：通过数组定义配色方案，用取模操作实现颜色自动循环，不管有多少组数据都能适配
• 分组判断：对比当前行与上一行的roll值，只有当值变化时才切换颜色，确保同一组行使用相同背景色

你可以根据需求修改groupColors里的颜色值，比如换成更鲜艳的配色或带透明度的rgba值，比如rgba(240,245,249,0.7)。

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