Question

我使用过嵌套表格。这是我的jquery代码，用于查找发票申请的行总计和总计。

$("tr.sum_hours td").on("change", '.hr', function() {
  row = $(this).parent("td").parent();
  total    = 0;
  qnt      = 0;
  rate     = 0;
  discount = 0;
  tax      = 0;
  $(row).find("td input.hr").each(function(index) {
    if ($(this).val() !== "") {
      if ($(this).hasClass('quantity')){
        qnt = parseFloat($(this).val());
      }
      if($(this).hasClass('rate')){
        rate = parseFloat($(this).val());
      }
      if($(this).hasClass('discount')){
        discount = parseFloat($(this).val());
      }
      if($(this).hasClass('tax')){
        tax = parseFloat($(this).val());
      }
      return total = ((qnt*rate)-(discount)+(tax))
    }
  });
  $(row).find("td input.total").val(total);
  grand_total = 0;
  return $(".total").each(function() {
    if ($("#invoice_grand_total") !== "") {
      grand_total = grand_total + parseFloat($(this).val());
    }
    return $("#invoice_grand_total").val(grand_total);
  });
  });

这是我的HTML代码。

<table class='item_details'>
  <thead>
  <tr>
    <th>Item name</th>
    <th>Description</th>
    <th>Qty</th>
    <th>Rate</th>
    <th>Discount</th>
    <th>Tax</th>
    <th>Total</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody class='item_details_input'>

    <tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_0_item_name" name="invoice[item_details_attributes][0][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_0_description" name="invoice[item_details_attributes][0][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_0_quantity" name="invoice[item_details_attributes][0][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_0_rate" name="invoice[item_details_attributes][0][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_0_discount" name="invoice[item_details_attributes][0][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_0_tax" name="invoice[item_details_attributes][0][tax]" size="30" type="text" /></td>

<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_0_total" name="invoice[item_details_attributes][0][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr> 
    <tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_1_item_name" name="invoice[item_details_attributes][1][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_1_description" name="invoice[item_details_attributes][1][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_1_quantity" name="invoice[item_details_attributes][1][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_1_rate" name="invoice[item_details_attributes][1][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_1_discount" name="invoice[item_details_attributes][1][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_1_tax" name="invoice[item_details_attributes][1][tax]" size="30" type="text" /></td>

<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_1_total" name="invoice[item_details_attributes][1][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr>
  </tbody>
</table>

此代码适用于静态行。但它不适用于动态添加的行。请帮忙。

Answer 1

替换

$("tr.sum_hours td").on("change", '.hr', function() {

用这个

$("body").on("change", 'tr.sum_hours td .hr', function() {

我希望它能奏效。

如果您想要更多说明，请参阅jQuery click function doesn't work after ajax call?

想要错误的jsfiddle演示http://jsfiddle.net/suhailvs/wjqjq/

在上述更改后，您的代码的jsfiddle，请访问http://jsfiddle.net/suhailvs/t67pn/1/

如何使用嵌套表单查找动态行的行总计和总计？

1 个答案:

替换

用这个