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伪类，您可以使用它来设置不同的空元素样式。根据这个compatibility chart，支持它的IE的最低版本是9.但是，似乎所有其他浏览器的所有最新版本都支持它。你可以像这样使用它。

td{
background-color: #F00;
}

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

上面将显示所有具有红色（＃F00）背景的数据的单元格，以及所有具有白色（#FFF）背景的空白单元格。

Answer 4

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

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

带数据的样式表单元格

4 个答案: