Check If My HTML Table Is Empty Using JavaScript

Checking to see if an HTML table row element is empty

Shoutout to @Teemu. He came up with the correct answer. This is what I did for it to work:

if (tble_row3.cells.length) {
     element.appendChild(tble_row3);
}

This correctly displays rows that have content and does not display rows that are empty.

how to check td is empty or not in javascript

:empty is used for empty contents. So you can use this with your css

td:empty{
   text-align:center;
}
td:empty:before{
  content:"-"
}

How to check if all <td> of a table are empty at once?

You could use the jQuery each function to cycle each td with class spot of your table with ID board, then return false if the text of the td is not ''.

function are_all_tds_empty() {  let result = true;  $('#board').find('td.spot').each(function(i, td) {    if ($(td).text() != '') {      result = false;    }  });  return result;}console.log(are_all_tds_empty());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="board">  <tr>    <td id="spot1" class="spot"></td>    <td id="spot2" class="spot"></td>    <td id="spot3" class="spot"></td>  </tr>  <tr>    <td id="spot4" class="spot"></td>    <td id="spot5" class="spot"></td>    <td id="spot6" class="spot"></td>  </tr>  <tr>    <td id="spot7" class="spot"></td>    <td id="spot8" class="spot"></td>    <td id="spot9" class="spot"></td>  </tr></table>

How to check if an element is empty using jquery?

Use filter() method

$('td').filter(function() {
  return $.trim($(this).text()).length == 0;
})

$('td').filter(function() {  return $.trim($(this).text()).length == 0;}).css('border', '1px solid red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tbody>    <tr>      <td contenteditable="true">        <br type="_moz">      </td>      <td contenteditable="false">2</td>      <td contenteditable="false">3</td>    </tr>    <tr>      <td contenteditable="false">4</td>      <td contenteditable="true">        <br type="_moz">      </td>      <td contenteditable="true">        <br type="_moz">      </td>    </tr>  </tbody></table>

Check If My HTML Table Is Empty Using JavaScript

Checking to see if an HTML table row element is empty

how to check td is empty or not in javascript

How to check if all <td> of a table are empty at once?

How to check if an element is empty using jquery?

Related Topics

Leave a reply