如何根据<th>的红色样式为对应表格整列设置红色

核心思路 #

1. 定位表头中字体为红色的<th>元素，记录它们的列索引；
2. 遍历表格主体的每一行，将对应索引的<td>字体设置为红色。

原生JavaScript代码实现 #

方式一：通过计算样式判断红色（适用于内联样式或CSS类设置的红色）

document.addEventListener('DOMContentLoaded', function() {
  // 目标表格（若页面有多个表格，建议给目标表格加id，比如#schedule-table）
  const table = document.querySelector('table');
  if (!table) return;

  const headerCells = table.querySelectorAll('thead th');
  const redColumnIndexes = [];

  // 筛选红色表头的列索引
  headerCells.forEach((cell, idx) => {
    const computedColor = window.getComputedStyle(cell).color.toLowerCase();
    // 覆盖常见的红色表示形式
    if (['red', '#ff0000', '#f00', 'rgb(255, 0, 0)', 'rgb(100%, 0%, 0%)'].includes(computedColor)) {
      redColumnIndexes.push(idx);
    }
  });

  // 批量设置对应列的字体颜色
  const bodyRows = table.querySelectorAll('tbody tr');
  bodyRows.forEach(row => {
    const cells = row.querySelectorAll('td');
    redColumnIndexes.forEach(colIdx => {
      if (cells[colIdx]) {
        cells[colIdx].style.color = 'red';
      }
    });
  });
});

方式二：通过CSS类判断（更可靠，推荐）

如果Blade生成表头时，给周末的<th>加了专属类（比如class="weekend"），直接通过类判断会比检测颜色值更稳定：

document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('table');
  if (!table) return;

  const headerCells = table.querySelectorAll('thead th');
  const redColumnIndexes = [];

  // 直接判断表头是否包含周末类
  headerCells.forEach((cell, idx) => {
    if (cell.classList.contains('weekend')) {
      redColumnIndexes.push(idx);
    }
  });

  // 批量设置列颜色
  const bodyRows = table.querySelectorAll('tbody tr');
  bodyRows.forEach(row => {
    const cells = row.querySelectorAll('td');
    redColumnIndexes.forEach(colIdx => {
      if (cells[colIdx]) {
        cells[colIdx].style.color = 'red';
        // 若需要同步背景色或其他样式，可在此添加
        // cells[colIdx].style.backgroundColor = '#ffebee';
      }
    });
  });
});

注意事项 #

• 如果表格是动态加载（比如通过AJAX渲染），需要将代码放在表格渲染完成后执行，而不是依赖DOMContentLoaded事件；
• 若页面存在多个表格，务必给目标表格添加唯一id，并修改querySelector的选择器（比如document.querySelector('#your-table-id')），避免误操作其他表格；
• 方式二的类判断法优先级更高，因为颜色值可能因浏览器、CSS变量等因素出现不同的解析结果，类名则是完全可控的。

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