$ (...). ячейки не определены в jQuery

Question

У меня есть две формы, форма1 содержит дату и кнопку отображения, кнопка показа позволяет скрыть форму1 и отобразить форму2, форма2 содержит выбранную дату и данные с флажками и валидатором кнопок, я хочу, когда я нажмите кнопку показать консоль показать матричные оклады.

$(document).ready(function() {
  $('#check_all').on('click', function(e) {
    if ($(this).is(':checked', true)) {
      $(".checkbox").prop('checked', true);
    } else {
      $(".checkbox").prop('checked', false);
    }
  });
  
  $('.checkbox').on('click', function() {
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $('#check_all').prop('checked', true);
    } else {
      $('#check_all').prop('checked', false);
    }
  });
  
  $("#form2").hide();
  
  $("#hide").click(function() {
    $("#form1").hide();
    $("#form2").show();
    let dat = $("#dateS").val();
    $("#da").text(dat);
    
    $("tr").each(function(i, r) {
      let mat = $(r).cells[2].innerText;
      console.log(mat);
    });
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form 1 -->
<div id="form1">
  <div class=" col-md-10 col-md-offset-1">
    <div class="form-group col-md-3">
      <label for="titre">date</label>
    </div>
    <div class="form-group col-md-5">
      <input type="date" name="dateS" id="dateS" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-md-offset-3">
    <div class="form-group col-md-2">
      <button class="btn btn-primary" id="hide" data-url="">show</button>
    </div>
  </div>
</div>

<!-- form 2 -->
<div id="form2">
  <div class="col-md-10 col-md-offset-1">
    <h4>dateS : <span id="da"></span></h4>
  </div>
  <table class="table table-bordered" id="mytable">
    <tr>
      <th><input type="checkbox" id="check_all"></th>
      <th>nom</th>
      <th>matricule</th>
      <th>adresse</th>
      <th>prime</th>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox"></td>
      <td>najib</td>
      <td>52</td>
      <td>tihit</td>
      <td><input type="text" name="prime" class="form-control prime" value="0"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox"></td>
      <td>adil</td>
      <td>62</td>
      <td>tagmast</td>
      <td><input type="text" name="prime" class="form-control prime" value="0"></td>
    </tr>
  </table>
  <div class="form-group col-md-offset-5 ">
    <button class="btn btn-success add-all" type="submit" id="hide">valider</button>
  </div>
</div>

Answer 1

Вместо $(r).cells[2].innerText используйте jQuery

$(r).find('td').eq(2).text()

или:

$(this).find('td:eq(2)').text();

---

cells используется в ванили JavaScript, чтобы получить cell из TableRowElement, в то время как ваш $(r) является ссылкой на коллекцию элементов, обернутых в jQuery объект

, поэтому, если вы хотите использовать JavaScript, вы все равно можете, но вроде:

r.cells[2].textContent

также обратите внимание на использование предпочтительного textContent против innerText