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

Question

I have a table with 3 <tr> , and 3 <td> inside each one.

The td's are filled dynamically and at some point I want to check if all td's of the table are empty at once and return true if it's the case.

I tried using .each() but I did not manage to make it.

Thanks!

Here is my HTML for clarification:

 <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>

Answer 1

I'd suggest, using native JavaScript:

// using Arrow syntax to create a named function, into
// which we pass a CSS selector:
const areAllEmpty = (selector) => {

  // we use Array.from() to convert the iterable result of
  // document.querySelectorAll() into an Array, and then
  // use Array.prototype.every() to iterate over the Array
  // elements:
  return Array.from(document.querySelectorAll(selector)).every(
    // again, using an Arrow function expression, 'cell'
    // is the user-defined variable name referring to the current
    // element of the Array of elements over which we're iterating;
    // here we test that the textContent, when leading/trailing
    // white-space is removed, of the current element is exactly
    // equal to an empty string:
    (cell) => cell.textContent.trim() === ''

    // if this assessment returns true every element in the Array
    // Array.prototype.every() returns true; otherwise it will
    // return false.
  );
}

 const areAllEmpty = (selector) => { return Array.from(document.querySelectorAll(selector)).every( (cell) => cell.textContent.trim() === '' ); } console.log(areAllEmpty('#board td'));

 <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>

References:

• Array.from() .
• Array.prototype.every() .
• Arrow functions .
• document.querySelectorAll() .
• Node.textContent .
• String.protoype.trim() .

Answer 2

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>

Answer 3

Just count how many non-empty cells there are.

 alert($('#board td:not(:empty)').length===0);

 <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>

Answer 4

No need to use .each() . Just select all the empty cells and see if it is equal to the total number of cells.

const isEmpty = () => $("#board td:empty").length === $("#board td").length;

 const isEmpty = () => $("#board td:empty").length === $("#board td").length; $("#pop").click(() => $("td").text("x")); $("#check").click(() => console.log(isEmpty()));

 table { border-collapse: collapse; } td { width:20px; height:20px; border: 1px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="check">Check if empty</button> <button id="pop">Populate Table</button> <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>

Answer 5

This will work, but since they are populated dynamically, you need to make sure that your script or whatever is done populating the table before you do your test.

    var empty=true;

    $(".spot").each(function(){
            if( $(this).html()!=="" ){
                empty=false;
            }   
    });

    console.log(empty) ;

Answer 6

One way to do this is:

  $(document).ready(function(){
    var x;
    $('#board td').each(function(){
      var check = $(this).text();
      if(check == ''){
        x = 'true';
      }else{
        x = 'false';
        return false;
      }

    })
    console.log(x);
  })

Now check the value of x . if it's true then all the td 's are empty and if false then not all the td 's are empty.