Jquery 使用数据设置表格单元格的样式

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

我可以只使用CSS还是需要添加一些jQuery代码？要么两者我都同意

下面是一个在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');
        }
    });
});

---

fiddle here

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

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

---

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

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

第二位将仅使用数据设置第一个单元格的样式，正如我在注释中看到的那样。只需为这两个类中的每个类将样式添加到CSS文件中

演示：

---

只是想出一些比我用的更好的类名；）

根据需要使用的浏览器，有一个用于css的伪类，可用于对空元素进行不同的样式设置。根据这一点，支持这一点的IE的最低版本是9。但是，所有其他浏览器的最新版本似乎都支持它。你可以这样使用它

td{
background-color: #F00;
}

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

---

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

这很好。至于边框，我实际上指的是每行中都有数据的第一个单元格。很抱歉，我不是很清楚。在这种情况下，您必须知道单元格中预期的数据。可能我没有正确理解问题，但无论如何，谢谢。很遗憾，您正在使用某种服务器端技术为页面提供服务。如果是这样，那么您可以在服务器端放置适当的样式。