如何更改表格中空单元格的背景颜色?

时间:2012-07-26 22:25:26

标签: jquery html css

我在表格中有四列,只有空白的字段才需要红色背景。我正在编辑的数据库有一个类(.data)用于所有列,所以我不知道是否需要为每个列添加单独的类以使其工作,或者是否有通过jQuery的方法来区分它在空白单元格之间并仅在表格的四列中更改背景颜色。

2 个答案:

答案 0 :(得分:2)

一种非常简单的方法是:

$("td:empty").css('background-color', 'red');

答案 1 :(得分:0)

你想要的很容易:

  • 对于表格中的每个<td>
  • 如果<td>不包含任何文字
  • 更改红色的backgroundColor

这就是:

$('td').each(function () {
    if ($(this).text() == '') {
        $(this).css('backgroundColor', 'red');
    }
});

另一种使用jQuery选择器功能的简短方法:

$('td:empty').css('backgroundColor', 'red');

这是同样的事情,只是更短。

要完成,您可以遇到一个特例:如果您的代码缩进了空格,即使您的<td>不包含任何文本,jQuery也会说您的<td>不为空。要解决这种情况,请使用以下小代码:

$('td').text( $.trim( $('td').text() ) );

$.trim()删除了无用的空格。

Try this demo to understand

在您的情况下,请按照以下方式应用:

$('td').each(function () {
    $(this).text( $.trim( $(this).text() ) );
    if ($(this).text() == '') {
        $(this).css('backgroundColor', 'red');
    }
});