Auto hide rows in HTML table when entire row is empty - html

Question

In a HTML table how can I auto hide an entire row if all the cells (columns) within that row are empty?
I presume there is something I can add to the tag that would do this, but I cannot seem to find a solution anywhere.

Answer 1

In HTML, you can use the hidden attribute, as in <tr hidden>, but this is an HTML5 novelty and has limited browser support. But if you can directly change the HTML markup, the best way to hide an element is to remove it.
Assuming you want something that still lets you have the row there in the markup, for some reason, then you can use JavaScript e.g. as follows:
<script>
function emptyCellsOnly(row) {
var cells = row.cells;
for(var j = 0; j < cells.length; j++) {
if(cells[j].innerHTML !== '') {
return false;
}
}
return true;
}
var rows = document.getElementsByTagName('tr');
for(var i = 0; i < rows.length; i++) {
if(emptyCellsOnly(rows[i])) {
rows[i].style.display = 'none';
}
}
</script>
The test if(cells[j].innerHTML !== '') checks whether cell is completely empty, as in <td></td>. A space character, or a line break, is not counted as empty. If they should be, modify the condition as needed.
The code rows[i].style.display = 'none' hides the row by setting its display property to none, so CSS-enabled browsers will show the page as if the element were not there, but it is still accessible to scripts, etc. You could alternative remove the element completely from the DOM.

Answer 2

You can use a javascript like this
$('tr').each(function() {
if($(this).find('td').length == 0) {
$(this).hide();
}
});

Answer 3

After some research I found this sollution, which has the advantage over empty-cells:hide, that it completely removes the space an empty cell would take up.
<style type="text/css">
table {
border-spacing: 0px; // removes spaces between empty cells
border: 1px solid black;
}
tr, td {
border-style: none; // see note below
padding: 0px; // removes spaces between empty cells
line-height: 2em; // give the text some space inside its cell
height: 0px; // set the size of empty cells to 0
}
</style>
Unfortunately you have to set border-style: none;, else the borders of empty cells will be painted anyway (which results in thick lines).
I tried additional code like:
td:empty {
display: none;
border-style: none;
}
But in my table of 2 columns it removes the borders of either the left or the right column, but never of both...
Any hint at how to remove the borders of empty rows would be appreciated.

Answer 4

in my case cells have Spaces tabs . they are not data.
areAllCellsEmpty : true if, all cells.textContent are empty or Whitespace
innerHTML didnt give the result i wanted.
usage:
hideEmptyRows_ofTableById("myTable_id"); /* <- your table id here */
code:
function isEmptyOrSpaces(str){
return str === null || str.trim() === '' ;
}
function areAllCellsEmpty(row) {
var cells = row.cells;
var anyCellFull = false;
for(var j = 0; j < cells.length; j++) {
if( ! isEmptyOrSpaces(cells[j].textContent) ) {
anyCellFull =true;
break;
}
}
return !anyCellFull;
}
function hideEmptyRows_ofTableById(elem_id){
var table = document.getElementById(elem_id);
var rows = table.getElementsByTagName('tr');
for(var i = 0; i < rows.length; i++) {
if( areAllCellsEmpty(rows[i]) ) {
rows[i].style.display = 'none';
}
}
}