Как я могу получить таблицу значений существует в TD таблицы использовать JQuery?

Question

Я хочу, чтобы при установке флажка в таблице проверка значений массива (NAME, FIRST NAME, SALAIRENET) в приведенном ниже примере давала мне просто SALAIRENET и давала NaN имя для проверки строки, пожалуйста, помогите мне. он мой столик

<table class="table table-bordered" id="mytable">
        <tr>
            <th>Archive</th>
            <th><input type="checkbox" id="check_all"></th>
            <th>S.No.</th>
            <th>matricule</th>
            <th>nom & prenom</th>
            <th>salaire net</th>
            <th>nbre de jour </th>
            <th>prime</th>
        </tr>
        @if($salaries->count())
            @foreach($salaries as $key => $salarie)
                <tr id="tr_{{$salarie->id}}">
                  <td>archive</td>
                  <td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
                  <td>{{ ++$key }}</td>
                  <td>{{ $salarie->matricule }}</td>
                  <td class="name">{{ $salarie->nom }} {{ $salarie->prenom }}</td>
                  <td class="salaireValue">{{ $salarie->salairenet }}</td>
                  <td><input type="text" name="nbreJ" class="form-control" value="{{$data['nbr']}}"></td>
                  <td><input type="text" name="prime" class="form-control" value="0"></td>
                </tr>
            @endforeach
        @endif
    </table>

он мой код jquery:

<script type="text/javascript">
    $(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);
            }
         });
         //get value
         $('.table').on('click', function() {
           var allChecked = $('.checkbox:checked');
           for (var i = 0; i < allChecked.length; i++) {
             var currentHtml = $(allChecked[i]).parent().siblings('.salaireValue')[0];
             var currentHtml1 = $(allChecked[i]).parent().siblings('.name')[0];
             var result = parseInt($(currentHtml)[0].innerText);
             var result1 = parseInt($(currentHtml1)[0].innerText);
             console.log(result);
             console.log(result1);
           }
         });  
    });
</script>

Answer 1

Может быть полезно создать функции, чтобы разбить работу.Также вы можете использовать parseInt(), но он должен получить строку, представляющую целое число, поэтому "1000" против "One Thousand".

Обратите внимание на следующее:

$(function() {
  function checkToggleAll(c, v) {
    $(".checkbox", c).each(function(i, el) {
      $(el).prop("checked", v);
    });
  }

  function checkAll(c) {
    if ($(".checkbox:checked", c).length == $(".checkbox", c).length) {
      $("#check_all").prop("checked", true);
    } else {
      $("#check_all").prop("checked", false);
    }
  }

  function gatherData(c) {
    var rows = {}
    $(".checkbox:checked", c).each(function(i, el) {
      var row = $(el).parent().parent();
      rows[row.attr("id")] = {
        Name: $(".first-name", row).text().trim(),
        SurName: $(".sur-name", row).text().trim(),
        SalaireValue: parseInt($(".salaireValue", row).text().trim())
      };
    });
    return rows;
  }

  $("#check_all").change(function() {
    checkToggleAll($("tbody"), $(this).prop("checked"));
    console.log(gatherData($(".table tbody")));
  });
  $("tbody .checkbox").on("change", function() {
    checkAll($(".table tbody"));
    console.log(gatherData($(".table tbody")));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="mytable">
  <thead>
    <tr>
      <th>Archive</th>
      <th><input type="checkbox" id="check_all"></th>
      <th>S.No.</th>
      <th>matricule</th>
      <th>nom & prenom</th>
      <th>salaire net</th>
      <th>nbre de jour </th>
      <th>prime</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr_1">
      <td>archive</td>
      <td><input type="checkbox" class="checkbox" data-id="1"></td>
      <td>1</td>
      <td>1001</td>
      <td class="name">Simpson, Homer</td>
      <td class="salaireValue">60000</td>
      <td><input type="text" name="nbreJ" class="form-control" value="40"></td>
      <td><input type="text" name="prime" class="form-control" value="0"></td>
    </tr>
    <tr id="tr_2">
      <td>archive</td>
      <td><input type="checkbox" class="checkbox" data-id="2"></td>
      <td>2</td>
      <td>1002</td>
      <td class="name">Leonard, Lenny</td>
      <td class="salaireValue">40000</td>
      <td><input type="text" name="nbreJ" class="form-control" value="40"></td>
      <td><input type="text" name="prime" class="form-control" value="0"></td>
    </tr>
    <tr id="tr_3">
      <td>archive</td>
      <td><input type="checkbox" class="checkbox" data-id="3"></td>
      <td>3</td>
      <td>1002</td>
      <td class="name">Carlson, Carl</td>
      <td class="salaireValue">55000</td>
      <td><input type="text" name="nbreJ" class="form-control" value="40"></td>
      <td><input type="text" name="prime" class="form-control" value="0"></td>
    </tr>
  </tbody>
</table>

Я предполагаю, что содержимое таблицы может обновляться динамически, поэтому я использую .on() на всякий случай.При необходимости вы можете использовать .change().

Надеюсь, это поможет.

Answer 2

Несколько изменений в вашем цикле for сделают это:

for (var i = 0; i < allChecked.length; i++) {
    var $tr = $(allChecked[i]).closest("tr");
    var item = {
        Name: $tr.find(".first-name").text(),
        SurName: $tr.find(".sur-name").text(),
        SalaireValue: $tr.find(".salaireValue").text()
    };

    console.log(item);
}

Я также разделил имена на два диапазона, чтобы их было легко выбирать.

$('#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);
            }
         });
         //get value
         $('.table').on('click', function() {
           var allChecked = $('.checkbox:checked');
           for (var i = 0; i < allChecked.length; i++) {
             var $tr = $(allChecked[i]).closest("tr");
             var item = {
                Name: $tr.find(".first-name").text(),
                SurName: $tr.find(".sur-name").text(),
                SalaireValue: $tr.find(".salaireValue").text()
             };
             
             console.log(item);
           }
         });  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="mytable">
        <tr>
            <th>Archive</th>
            <th><input type="checkbox" id="check_all"></th>
            <th>S.No.</th>
            <th>matricule</th>
            <th>nom & prenom</th>
            <th>salaire net</th>
            <th>nbre de jour </th>
            <th>prime</th>
        </tr>
        <tr id="tr_1">
          <td>archive</td>
          <td><input type="checkbox" class="checkbox" data-id="1"></td>
          <td>1</td>
          <td>1</td>
          <td class="name"><span class='first-name'>Name</span> <span class='sur-name'>Surname</span></td>
          <td class="salaireValue">123</td>
          <td><input type="text" name="nbreJ" class="form-control" value="1"></td>
          <td><input type="text" name="prime" class="form-control" value="0"></td>
        </tr>
        <tr id="tr_2">
          <td>archive</td>
          <td><input type="checkbox" class="checkbox" data-id="2"></td>
          <td>2</td>
          <td>2</td>
          <td class="name"><span class='first-name'>Name</span> <span class='sur-name'>Surname</span></td>
          <td class="salaireValue">456</td>
          <td><input type="text" name="nbreJ" class="form-control" value="1"></td>
          <td><input type="text" name="prime" class="form-control" value="0"></td>
        </tr>
    </table>