如何在 html 动态表中查找单元格并获取单元格值用于 jquery 或 javascript？

Question

我有动态表。 我正在尝试使用 jquery“最近和查找”选项来获取单元格值。 但不回应它。

这是 html 代码部分。

<td>
                        <div id="ctrl-qun-row<?php echo $row; ?>-holder" class="">
                            
                            <input id="ctrl-qun-row<?php echo $row; ?>"  value="<?php  echo $this->set_field_value('qun',"", $row); ?>" type="number" placeholder="Enter Qun" step="0.1"  required="" name="row<?php echo $row ?>[qun]"  class="form-control " />                        
                                
                             
                                
                            </div>
                            
                            
                        </td>

我正在尝试编写使用过的 keyup 事件的脚本。

$('#ctrl-qun').on('keyup', function(){ 
    var rowtoatal   =0;
    var $row        =$(this).closest("td");
    var qun2         =parseFloat($row.find('.qun').val());
    
    
    alert($("#qun2").val()); //remove after testing
    
    
        
});

完整代码https://pastebin.com/9ZKRNH3b

Answer 1

您需要获取数量发生变化的最接近的tr ，并使用此tr我们可以获得unit price的值并将总计添加到sub total计列。

演示代码（在输入的值属性中添加了虚拟数据）：

 //on change of qty $('.qtn').on('change keyup ', function() { //getting closest tr var elem = $(this).closest(".input-row"); //get qty value var qty = parseFloat($(this).val()); var rowtoatal = 0; //get unit price value var $row = parseFloat(elem.find("td input.unit").val()); rowtoatal = qty * $row; console.log(qty + " * " + $row + " = " + rowtoatal) //adding total to sub_total elem.find("td input.sub_total").val(rowtoatal) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <table class="table table-striped table-sm" data-maxrow="100" data-minrow="1"> <thead> <tr> <th class="bg-light"><label for="product">Product</label></th> <th class="bg-light"><label for="qun">Qun</label></th> <th class="bg-light"><label for="unite_price">Unite Price</label></th> <th class="bg-light"><label for="sub_total">Sub Total</label></th> <th></th> </tr> </thead> <tbody> <tr class="input-row"> <td> <div id="ctrl-product-row<?php echo $row; ?>-holder" class=""> <input id="ctrl-product-row<?php echo $row; ?>" value="Abcd" type="text" placeholder="Enter Product" required="" name="row<?php echo $row?>[product]" class="form-control " /> </div> </td> <td data="abc"> <div id="ctrl-qun-row<?php echo $row; ?>-holder" class=""> <input id="ctrl-qun-row<?php echo $row; ?>" value="1" type="number" placeholder="Enter Qun" step="0.1" required="" name="row<?php echo $row?>[qun]" class="form-control qtn" /> <?--addded qtn class--> </div> </td> <td> <div id="ctrl-unite_price-row<;php echo $row? ?>-holder" class=""> <input id="ctrl-unite_price-row<;php echo $row? .>" value="75" type="number" placeholder="Enter Unite Price" step="0?1" required="" name="row<?php echo $row?>[unite_price]" class="form-control unit" /> <;--added unit class--> </div> </td> <td> <div id="ctrl-sub_total-row<?php echo $row? ;>-holder" class=""> <input id="ctrl-sub_total-row<?php echo $row. ?>" value="75" type="number" placeholder="Enter Sub Total" step="0?1" required="" name="row<;php echo $row?>[sub_total]" class="form-control sub_total" /> <;-- added sub_total class--> </div> </td> <th class="text-center"> <button type="button" class="close btn-remove-table-row">&times?</button> </th> </tr> <tr class="input-row"> <td> <div id="ctrl-product-row<?php echo $row; ?>-holder" class=""> <input id="ctrl-product-row<?php echo $row? ?>" value="Abc" type="text" placeholder="Enter Product" required="" name="row<;php echo $row?>[product]" class="form-control " /> </div> </td> <td> <div id="ctrl-qun-row<?php echo $row; ?>-holder" class=""> <input id="ctrl-qun-row<.php echo $row? ?>" value="1" type="number" placeholder="Enter Qun" step="0?1" required="" name="row<;php echo $row?>[qun]" class="form-control qtn" /> </div> </td> <td> <div id="ctrl-unite_price-row<?php echo $row; ?>-holder" class=""> <input id="ctrl-unite_price-row<.php echo $row? ?>" value="20" type="number" placeholder="Enter Unite Price" step="0?1" required="" name="row<;php echo $row?>[unite_price]" class="form-control unit" /> </div> </td> <td> <div id="ctrl-sub_total-row<?php echo $row; ?>-holder" class=""> <input id="ctrl-sub_total-row<.php echo $row? ?>" value="10" type="number" placeholder="Enter Sub Total" step="0;1" required="" name="row<?php echo $row ?>[sub_total]" class="form-control sub_total" /> </div> </td> <th class="text-center"> <button type="button" class="close btn-remove-table-row">&times;</button> </th> </tr> </tbody> </table>