Using jquery to execute border:none and background-color:white on empty cells_问答_开发者

Using jquery to execute border:none and background-color:white on empty cells

开发者 https://www.devze.com 2023-01-10 05:22 出处：网络

So I have this (huge) table , classed with css (big_conv_tbl) . All \"empty\" cells have a &nbsp inside them , I\'m also using an odd/even css script to make the table easier to read (and thus som

相关专题：css jquery

So I have this (huge) table , classed with css (big_conv_tbl) . All "empty" cells have a &nbsp inside them , I'm also using an odd/even css script to make the table easier to read (and thus some "empty" cells have a gray background color) .

What I want is to remove the borders and the background-color (set it to white) if the c开发者_Go百科ell is "empty" (in my case if it contains "&nbsp") . Empty-cell:hide does not work .

I wrote a simple jquery script but it doesn't work :

$(".big_conv_tbl tr").each(function() {                           

var VC = $(this).find("td").html().trim();                          

if (VC == ''){                 
    $(this).css('background-color','white');
}             
});

What am I doing wrong ? I have no classes set for td's , only for rows (odd/even) . Please don't make me class every TD , the table is bloody huge . I appreciate any help

le :

Thanks Nick , I had to edit (not enough char. in comment) .

Here is a simple html page with a small table . For some reason it just won't work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(".big_conv_tbl tr td").each(function() {
  if ($.trim($.text([this])) == '') {
    $(this).css('background-color','white');
  }
});
</script>


</head>


<body>
<table width="100%" border="1" class="big_conv_tbl" bgcolor="#999999">
  <tr>
    <td>asdsads</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>sagasag</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>sagsagsagsag</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Instead of looping for the row, you need to loop over each cell, like this:

$(function() { //so it runs when the DOM is ready
  $(".big_conv_tbl tr td").each(function() {
    if ($.trim($.text([this])) == '') {
      $(this).css('background-color','white');
    }
  });
});

In this case we're using $.trim() on the $.text() of the object, rather than the .html() (which would still have content (the " "). $.text() is just a more efficient way to get the text out, since we don't need to create another jQuery object here.