Как прочитать текущее поле ввода строки таблицы с помощью jquery

Question

Я пытаюсь выбрать текущую строку <td> значение тега ввода, когда установлен флажок для этой конкретной строки, но он возвращает null.

Я пытался получить текущуюстрока, и я получил его, чтобы прочитать значение поля ввода выбранной строки флажка

var allVals = [];
$('input[name=selectedBilties]:checked').each(function() {
   var  freight_id = $(this).closest('tr').find( $('input[name="freight_id[]"]') ).val();
   allVals.push($(this).val());
   allVals.push(freight_id);
});
console.log("All Values"+ allVals);

HTML таблицы с php->codeigniter

<table id="example1" class="table table-bordered table-striped table-sm" style=" overflow: auto;  ">
   <thead class="bg-info">
      <tr>
         <th>Select</th>
         <th>Bilty No</th>
         <th>Bilty Date</th>
         <th>Pkgs</th>
         <th>weight</th>
         <th>From</th>
         <th>TO</th>
         <th>Consignor</th>              
         <th>Consignee</th>
         <th>Remark</th>
      </tr>
   </thead>

   <tbody class="table-hover">
      <?php foreach($crossing as $pod){?>
      <tr>
         <td><input type="checkbox" id="selectedBilties" name="selectedBilties" value="<?php echo $pod->id;?>"></td>
         <td><?php echo $pod->id;?></td>
         <td><?php echo $pod->lr_date;?></td>
         <td><?php echo $pod->no_of_pkgs;?></td>
         <td><?php echo $pod->lr_actual_weight;?></td>
         <td><?php echo $pod->lr_from;?></td>
         <td><?php echo $pod->lr_to;?></td>
         <td><?php echo $pod->consignor_name;?></td>
         <td><?php echo $pod->consignee_name;?></td>
         <td><?php echo $pod->lr_description;?></td>
         <input class="selected" type="text" id="freight_id" name="freight_id[]" value="<?php echo $pod->fr_memo_ids; ?>">
         <input class="selected" type="hidden" id="challan_id" name="challan_id[]" value="<?php echo $pod->challan_id; ?>">
      </tr>
      <?php }?>
   </tbody>
</table>

Answer 1

Вы должны поместить входные элементы внутрь td , иначе селектор не будет работать.Также вы должны выполнить свой код при смене флажка, так как изначально флажок не установлен:

$('input[name=selectedBilties]').click(function(){
  var allVals  = [];
  $('input[name=selectedBilties]:checked').each(function() {
    
    var  freight_id = $(this).closest('tr').find('input[name="freight_id[]"]').val();
    var temp = [];
    temp.push($(this).val());
    temp.push(freight_id);
    allVals.push(temp);
  });
  console.log(allVals);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered table-striped table-sm" style=" overflow: auto;  ">
  <thead class="bg-info">
    <tr>
      <th>Select</th>
      <th>Bilty No</th>
      <th>Bilty Date</th>
      <th>Pkgs</th>
      <th>weight</th>
      <th>From</th>
      <th>TO</th>
      <th>Consignor</th>              
      <th>Consignee</th>
      <th>Remark</th>
    </tr>
  </thead>

  <tbody class="table-hover">
    <tr>
      <td><input type="checkbox" id="selectedBilties" name="selectedBilties" value="11"></td>
      <td>gjhg</td>
      <td>ghj</td>
      <td>ghjg</td>
      <td>ghj</td>
      <td>ghjg</td>
      <td>ghj</td>
      <td>gjh</td>
      <td>ghj</td>
      <td>ghj</td>
      <td><input class="selected" type="text" id="freight_id" name="freight_id[]" value="val11"></td>
      <td><input class="selected" type="hidden" id="challan_id" name="challan_id[]" value="<?php echo $pod->challan_id; ?>"></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="selectedBilties" name="selectedBilties" value="22"></td>
      <td>vbv</td>
      <td>gh</td>
      <td>gjh</td>
      <td>gh</td>
      <td>ghj</td>
      <td>ghj</td>
      <td>ghj</td>
      <td>ghj</td>
      <td>gjghj</td>
      <td><input class="selected" type="text" id="freight_id" name="freight_id[]" value="val22"></td>
      <td><input class="selected" type="hidden" id="challan_id" name="challan_id[]" value=""></td>
    </tr>
  </tbody>
</table>