Как проверить, что все <td>таблицы пусты одновременно?

Question

У меня есть таблица с 3 <tr> и 3 <td> внутри каждого.

ТД заполнены динамически, и в какой-то момент я хочу проверить, все ли ТД таблицы пусты на один раз и верните true, если это так.

Я пытался использовать .each(), но мне не удалось это сделать.

Спасибо!

Вот мой HTML для уточнения:

<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

Я бы предложил, используя нативный 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>

Ссылки:

• Array.from().
• Array.prototype.every().
• Функции стрелок .
• document.querySelectorAll().
• Node.textContent.
• String.protoype.trim().

Answer 2

Просто посчитайте, сколько есть непустых ячеек.

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 3

Не нужно использовать .each(). Просто выделите все пустые ячейки и посмотрите, равно ли оно общему количеству ячеек.

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 4

Вы можете использовать функцию jQuery each для циклического переключения каждого td с классом spot таблицы с идентификатором board, а затем вернуть false, если text из td не является ''.

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 5

Один из способов сделать это:

  $(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);
  })

Теперь проверьте значение x. если это true, то все td пусты, а если false, то не все td пусты.

Answer 6

Это будет работать, но, поскольку они заполняются динамически, вам необходимо убедиться, что ваш сценарий или что-то еще заполнено таблицей, прежде чем выполнять тест.

    var empty=true;

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

    console.log(empty) ;