CODEWITHSUNDEEP
javascripthtml
Nick
Nick

Reputation: 77

Hide empty html table rows

Problem

I have a table with one or more empty rows. How to hide empty rows from the table?

For example

1 - John | Alfredo

2 - Mark | Zuck

3 - |

4 - Carl | Johnson

In this case, I'd like to delete the third row.

Step Tried

I found how to delete a specific row, what about deleting all the empty rows? 

deleteEmptyRows();

function deleteEmptyRows() {
  var myTable = document.getElementById("myTable")
  var rowToDelete = 2;
  myTable.deleteRow(rowToDelete)
 
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
  <tbody>
    <tr>
      <td>John</td>
      <td>Alfredo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Zuck</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Carl</td>
      <td>Johnson</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 3498

Answers (4)

Avanthika
Avanthika

Reputation: 4182

This is how you can dynamically hide empty table rows with javascript.

deleteEmptyRows();
function checkIfCellsAreEmpty(row) {
  var cells =  row.cells;
  var isCellEmpty = false;
  for(var j = 0; j < cells.length; j++) {
    if(cells[j].innerHTML !== '') {
      return isCellEmpty;
    }
  }
  return !isCellEmpty;
}
function deleteEmptyRows() {
  var myTable = document.getElementById("myTable");
  for(var i = 0; i < myTable.rows.length; i++) {
    var isRowEmpty = checkIfCellsAreEmpty(myTable.rows[i]);
    if (isRowEmpty) {
     myTable.rows[i].style.display = "none";
    }
  }
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
  <tbody>
    <tr>
      <td>John</td>
      <td>Alfredo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Zuck</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Carl</td>
      <td>Johnson</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

n1kkou
n1kkou

Reputation: 3142

With native Javascript: 

function removeRow(src) {
    var tableRows = document.getElementById(src).querySelectorAll('tr');
    tableRows.forEach(function(row){
        if((/^\s*$/).test(row.innerText)){
            row.parentNode.removeChild(row);
        }
    });
}

removeRow('myTable');

The only problem is when you have some other characters in the row, except the whitespaces. This regex checks for blank characters, but if u have a dot inside or any other non empty character, it will fail.

Upvotes: 0

ABC
ABC

Reputation: 2148

Was answered in another thread. Jquery: hiding empty table rows

Loops through all table tr rows, and checks td lengths. If the td length is empty will hide. 

$("table tr").each(function() {        
        let cell = $.trim($(this).find('td').text());
        if (cell.length == 0){
            console.log('Empty cell');
            $(this).addClass('nodisplay');
        }                   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <!-- Will hide --> <td></td>
  </tr>
</table>

Upvotes: 0

Bibberty
Bibberty

Reputation: 4768

Here, a simple method for row is empty (this allows us to check for other conditions easily later).

Loop over rows and call remove if empty.

const rowIsEmpty = (tr) => Array.from(tr.querySelectorAll('td')).every(td => td.innerText === "");

deleteEmptyRows();

function deleteEmptyRows() {
  var myTable = document.getElementById("myTable");
  
  myTable.querySelectorAll('tr').forEach(tr => {
    if(rowIsEmpty(tr)) tr.remove();
  });

 
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
  <tbody>
    <tr>
      <td>John</td>
      <td>Alfredo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Zuck</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Carl</td>
      <td>Johnson</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions