Using jquery to execute border:none and background-color:white on empty cells
So I have this (huge) table , classed with css (big_conv_tbl) . All "empty" cells have a   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 " ") . 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> </td>
</tr>
<tr>
<td>sagasag</td>
<td> </td>
</tr>
<tr>
<td>sagsagsagsag</td>
<td> </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.
加载中,请稍侯......
精彩评论