如何使用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);

带有php->codeigniter html表

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