如何在 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>