I have a 5×7 HTML table. On many queries, there are fewer than 35 items filling the complete table.
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?
-
Are you talking about hiding whole rows or columns of empty cells? Or some other pattern?e100– e1002010-04-13 18:19:19 +00:00Commented Apr 13, 2010 at 18:19
Add a comment
|
5 Answers
Edit - Improved Version
// Grab every row in your table
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).remove(); // or $(this).hide();
}
});
Not tested but seems logically sound.
// Grab every row in your table
$('table#yourTable tr').each(function(){
var isEmpty = true;
// Process every column
$(this).children('td').each(function(){
// If data is present inside of a given column let the row know
if($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has data
return false;
}
});
// If the whole row is empty remove it from the dom
if(isEmpty) $(this).remove();
});
2 Comments
HoldOffHunger
This works only if all TD cells are blank for a particular column. Otherwise, if you remove the first cell, the remaining cells' contents are each shifted left by one (display error). If it's true that the TD cells are all blank for a whole column, just delete the column.
Michael come lately
Is it worth assigning
$this = $(this); inside the each function rather than converting to a jQuery object three times per row?Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
1 Comment
David Fells
I've had situations where $('td:empty').hide(); did not work in Safari so I don't use it. I wonder if it's more reliable in newer versions of jquery.
$('td:empty').hide();
Comments
How about CSS empty-cells
table {
empty-cells: hide;
}
Comments
I'm voting for Ballsacian's answer. For some reason,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug. If you remove the outermost :not(), it does what you'd expect, but the full expression above crashes jQuery.
answered Dec 29, 2010 at 21:09
Michael come lately
9,6418 gold badges70 silver badges97 bronze badges