用数据样式表单元格

Question

我有一个带有一些数据值的表。我想添加样式来更改具有值的单元格，使其具有背景颜色，并为第一个单元格添加边框颜色。

我可以只使用CSS还是我需要添加一些jQuery代码?我一个都可以，两个都可以。

Answer 1

在jquery中，你可以这样做(这会为所有有值的单元格添加背景色，并为第一个有值的单元格添加边框，但我可以根据你的需要修改它)编辑-更新以考虑评论

$('table tr').each(function() {
    var firstDone = false;
    $(this).children('td').each(function() {
        if ($(this).text() != '') {
            if (!firstDone) {
                $(this).css('border', '2px solid yellow');
                firstDone = true;
            }
            $(this).css('background-color', 'green');
        }
    });
});

此处提琴http://jsfiddle.net/rkrHx/11/

Answer 2

在单元格中添加/删除CSS类通常比直接使用javascript设置样式要好。试试这个:

$("td").each(function(){
  if ($(this).text()) $(this).addClass('hasData');
});
$("tr").each(function(){
  $('td.hasData:first', this).addClass('firstCellwithData');
});

第二个位只会用数据样式化第一个单元格，正如我在评论中看到的那样。只需将这两个类的样式分别添加到CSS文件中即可。

演示:http://jsfiddle.net/rkrHx/19/

想出一些比我用的更好的类名;)

Answer 3

根据您需要工作的浏览器，css有一个:empty伪类，您可以使用它来对空元素进行不同的样式设置。根据兼容性表，支持此功能的IE的最低版本是9。然而，它似乎被所有其他浏览器的最新版本所支持。你可以这样使用。

td{
background-color: #F00;
}
td:empty {
background-color: #FFF;
}

上面将显示所有数据的单元格的背景为红色(#F00)，所有空白的单元格的背景为白色(#FFF)。

Answer 4

你可以通过css设置边框颜色，但要根据数据值设置背景颜色，你需要使用javascript或jquery，如下所示。你可以使用contains选择器

$("table td:contains('datavalue')").css({backgroundColor:"yellow"});