How Can I Hide Empty Html Table Cells With Jquery?
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
Solution 1:
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 knowif($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has datareturnfalse;
}
});
// If the whole row is empty remove it from the domif(isEmpty) $(this).remove();
});
Solution 2:
Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
Solution 3:
$('td:empty').hide();
Solution 4:
How about CSS empty-cells
table {
empty-cells: hide;
}
Solution 5:
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.
Post a Comment for "How Can I Hide Empty Html Table Cells With Jquery?"