how to find cell & get cell value in html Dynamic table use for jquery or javascript?

Question

I have dynamic table. i am try to get cell value use jquery "closest & find" option. but not response it.

this is html code part.

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

i am try to script used keyup event.

$('#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
    
    
        
});

full code https://pastebin.com/9ZKRNH3b

Answer 1

You need to get the closest tr where the quantity is change and using this tr we can get value for unit price and add total to sub total column.

Demo Code (Added dummy data in value attribute of inputs):

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