css - 为空单元格赋予不同的背景颜色

Question

我在互联网上环顾四周，找不到为 html/CSS 中的空单元格赋予不同背景颜色的解决方案。

在开发节日制作系统时，我想通过给制作者（系统用户）一个警告颜色来提醒制作者（系统用户）注意复杂表格中丢失的数据。

我当然知道背景和空单元格属性，但似乎没有组合，因为空单元格属性只有隐藏、显示和固有。但我想在某个地方有一些解决方案......

任何想法如何解决这个问题？

Answer 1

您可以使用 CSS3:empty伪类来定位空元素并设置它们的样式。或者使用一点JS。

编辑：小提琴http://jsfiddle.net/rHkMX/

Answer 2

使用：空

要了解如何使用 jQuery 更改 css 背景，请查看此 jsfiddle：http: //jsfiddle.net/5sVAt/1/

否则，只做 CSS 版本

td:empty{
    background-color: red;
}

Answer 3

您可以使用 :empty 伪类，但我不太确定浏览器的兼容性（因为这是 css3）。但是您可以使用 javascript 来检查 td 的内容。

使用 Jquery 的示例：

<script type="text/javascript">
$(document).ready(function() {
    $("td").each(function() {
        if ($(this).html() == "") $(this).css("background", "black");
    });
});
</script>

这将为单元格 html 为空的每个 td 添加黑色背景。

Answer 4

您可以为单元格分配一个类empty，然后将empty类的背景颜色设置为您想要的颜色。