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

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>

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>

• javascript
• jquery

Share Improve this question Follow edited Jan 21, 2020 at 20:35 adxl asked Jan 21, 2020 at 19:14 adxladxl 89911 gold badge1010 silver badges2121 bronze badges 8

• 2 Where is your javascript code you attempted? – brso05 Commented Jan 21, 2020 at 19:16
• 1 I've converted your posted HTML to a runnable Stack Snippet; please add your attempted JavaScript (and any relevant library from the menu on the left) to that demo. – David Thomas Commented Jan 21, 2020 at 19:18
• 2 have you noticed ... first td inside second tr is missing > – Tariqul Islam Commented Jan 21, 2020 at 19:19
• 2 @jwatts1980 In most situations, I would advise against correcting any errors present in the original post (without permission from OP, at least). It's possible that by doing so, you're removing the cause of the error from the question. Better off just to let OP know in the ments (as Tariqul has), and OP can correct it as they need to :) – Tyler Roper Commented Jan 21, 2020 at 19:38
• 1 @TylerRoper Noted. Thanks. My justification in this case is that it seemed to be a semantic change as the browser DOM will auto-terminate a TD in this case, which was unlikely to affect the results of the .each() call the OP mentioned trying. But, I see your point. The OP probably needed to make that correction anyway, so it needed to be brought to their attention. – jwatts1980 Commented Jan 21, 2020 at 19:49

 |  Show 3 more ments

6 Answers 6

Sorted by: Reset to default 3

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().

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

Just count how many non-empty cells there are.

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

<script src="https://cdnjs.cloudflare./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>

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

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

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.