如何为空td添加class并设置其背景样式？

方法1：纯CSS实现（最简单，仅匹配完全空白单元格） #

• 检测空td可以直接用CSS的:empty伪类，该伪类会匹配没有任何子节点（包括文本节点、空格、换行）的td元素
• 如果你的空白单元格可能存在空格、换行这类不可见字符，建议搭配后面的JS方案使用，避免漏匹配
• 要给不同空白td设置不同背景色，可以配合CSS变量+:nth-child选择器实现，示例代码如下：

/* 匹配完全空白的td */
td:empty {
  /* 基于hsl颜色模式，通过变量调整色相生成不同颜色 */
  background-color: hsl(calc(var(--td-index, 0) * 60), 70%, 85%);
}
/* 给每个td分配独立序号变量，列数多的话可以用JS批量赋值不用手动写 */
td:nth-child(1) { --td-index: 1; }
td:nth-child(2) { --td-index: 2; }
td:nth-child(3) { --td-index: 3; }

方法2：JS实现（适配所有场景，支持识别带空白字符的假空单元格） #

第一步：空td检测逻辑 #

该方法可以识别包含空格、换行、制表符的假空白单元格，比CSS伪类适用场景更广：

function isTdEmpty(td) {
  // 去除内容前后所有空白字符后判断是否有剩余内容
  return td.textContent.trim().length === 0;
}

第二步：给空白td设置不同背景色 #

可以用预设颜色池循环取色，也可以动态生成随机颜色：

// 预设柔和背景色池，也可以替换为动态生成随机色的逻辑
const colorPool = ['#fef0f0', '#f0f9ff', '#f0fff4', '#fffbeb', '#f5f0ff'];
let colorIndex = 0;

// 遍历所有td做判断加样式
document.querySelectorAll('td').forEach(td => {
  if (isTdEmpty(td)) {
    td.style.backgroundColor = colorPool[colorIndex % colorPool.length];
    colorIndex++;
    // 要完全随机颜色可以替换上面的赋值逻辑为：
    // td.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 90%)`
  }
})

注意事项 #

• 如果是动态渲染的表格，在表格内容更新完成后重新执行一次上述JS逻辑即可生效
• 有特殊判定规则的话，修改isTdEmpty函数的判断条件即可，比如需要忽略特定占位元素时，增加对应节点的过滤逻辑就行

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