Reputation: 38825
For the table below, all cell under row2 (tr class="row2"
) is empty, how to check the row with empty cell and only hide (display: none
) it?
<table>
<tr class="row1">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr class="row2">
<td></td>
<td></td>
<td></td>
</tr>
...
<tr class="row100">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
Upvotes: 5
Views: 9920
Reputation: 1
Modified to check for a cell with no text, as our CMS outputs empty p tags for cells with no content.
$('table tr').each(function(){
var tr = $(this);
var tdNumber = tr.find('td').length;
var counter = 0;
tr.find('td').each(function () {
if ($(this).text().trim() == "") counter++;
});
if ( counter == tdNumber ) tr.remove();
});
Upvotes: 0
Reputation: 9121
With the following jQuery script you will loop through all table rows, check all their colums and see if any of them is not empty.
If none of them is not empty it will hide the row.
$('table tr').each(function(){
var hide = true;
$('td',this).each(function(){
if($(this).html() != '')
hide = false;
});
if(hide)
$(this).hide();
});
Excuse me, it's supposed to be .html()
not .val()
Here is a jsfiddle example: http://jsfiddle.net/dYkLg/
Here is a shorter version actually, this works by checking if the amount of empty colums is equal to the total amount of colums within that row directly checking if there are any non-empty colums in the current row:
$('table tr').each(function(){
if(!$('td:not(:empty)',this).length)
$(this).hide();
});
Updated thanks to Tom Hubbard
With the jsfiddle: http://jsfiddle.net/dYkLg/2/
Upvotes: 6
Reputation: 31043
you can use the :empty
selector to check the empty values
$("tr td:empty").hide();
here is the working fiddle http://jsfiddle.net/JujHv/1/
Upvotes: 2
Reputation: 5660
$('table tr').each(function(){
var tr = $(this);
var tdNumber = tr.find('td').length;
var counter = 0;
tr.find('td').each(function () {
if ( $(this).html() == '' ) counter++;
});
if ( counter == tdNumber ) tr.remove();
});
Upvotes: 1
Reputation: 16139
Something like (i.e. for each row if there is are zero non-empty td's then hide it):
$("tr").each(function (){
var JsThis = $(this);
if($("td:not(:empty)",JsThis).size() === 0){
JsThis.hide();
}
});
Upvotes: 2
Reputation: 2155
First of all I would give your table an id (i.e. "mytable")
Then you just need to do:
$("#mytable td:empty").hide();
Hope I helped. In general the :empty selector will return elements that do not have anything at all inside them (i.e. no children and no contents).
Regards
Upvotes: 2
Reputation: 263157
There are at least two ways to do this.
First, if all the <td>
elements are empty, then the inner text of the <tr>
element will only consist of whitespace, so you can use $.trim() with filter() and write:
$("tr").filter(function() {
return $.trim($(this).text()) == "";
}).hide();
You can also use the :not(), :has() and :empty selectors to explicitly match the <tr>
elements that only contain empty <td>
elements:
$("tr").not(":has(td:not(:empty))").hide();
Upvotes: 6
Reputation: 16480
If you use classes just to navigate with jQuery and don't modify their heights try this:
$("tr").each(function(index)
{
if ($(this).height() == 0)
$(this).hide();
});
Upvotes: 2