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

Question

我有动态table。我正在尝试使用 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>

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

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

html

javascript

jquery

dynamic-tables