汇总texboxes列并使用JavaScript在文本框中显示

Question

问题：

我必须在网格中显示金额文本框的总和，并在“账单金额”文本框中显示合计，但是我得到的只是0。为了更好的理解，我附上了屏幕截图。

截屏：

源代码：

HTML代码：

$(document).on('keydown', 'input', function() {
  $('.Qty').on("input change", function() {
    var price = 0;
    var total = 0;

    $('.tb3 tr').each(function() {
      var qty = $(this).find('.Qty').val();
      var rate = $(this).find('.Rate').val();
      var price = qty * rate;
      $(this).find('.Value').val(price);
      total = total + price;
    });
    $('.TieTotal').val(total.toFixed(2));
  });

  $('.Value').on(function() {
    $('.tb3 tr').each(function() {});
    $('.TieTotal').val(total.toFixed(2));
  });


});

<table>
  <tbody>
    <tr>
      <td>
        <a href='javascript:void(0);' class='remove3'>
          <span class='glyphicon glyphicon-remove'></span>
        </a>
      </td>
      <td>
        <input type="text" class="Product_Code" name="Prdtcode[]" class="form-control input- 
                 xs Product_Code " required>
      </td>
      <td>
        <input type="text" class="Product_Name" name="Prdtname[]" class="form- 
               control input-xs">
      </td>
      <td>
        <input type="text" class="Qty" name="Qty[]" class="form-control input-xs" required>
      </td>
      <td>
        <input type="text" class="Rate" class="form-control input- 
              xs" name="Rate[]" value="">
      </td>
      <td>
        <input type="text" class="Value" class="form-control input- 
               xs" name="amount[]" value="">
      </td>
    </tr>

    <tr>
      <td>
        <a href='javascript:void(0);' class='remove3'>
          <span class='glyphicon glyphicon-remove'></span>
        </a>
      </td>
      <td>
        <input type="text" class="Product_Code" name="Prdtcode[]" class="form-control input- 
                 xs Product_Code " required>
      </td>
      <td>
        <input type="text" class="Product_Name" name="Prdtname[]" class="form- 
               control input-xs">
      </td>
      <td>
        <input type="text" class="Qty" name="Qty[]" class="form-control input-xs" required>
      </td>
      <td>
        <input type="text" class="Rate" class="form-control input- 
              xs" name="Rate[]" value="">
      </td>
      <td>
        <input type="text" class="Value" class="form-control input- 
               xs" name="amount[]" value="">
      </td>
    </tr>
    <tr>
      <td>
        <a href='javascript:void(0);' class='remove3'>
          <span class='glyphicon glyphicon-remove'></span>
        </a>
      </td>
      <td>
        <input type="text" class="Product_Code" name="Prdtcode[]" class="form-control input- 
                 xs Product_Code " required>
      </td>
      <td>
        <input type="text" class="Product_Name" name="Prdtname[]" class="form- 
               control input-xs">
      </td>
      <td>
        <input type="text" class="Qty" name="Qty[]" class="form-control input-xs" required>
      </td>
      <td>
        <input type="text" class="Rate" class="form-control input- 
              xs" name="Rate[]" value="">
      </td>
      <td>
        <input type="text" class="Value" class="form-control input- 
               xs" name="amount[]" value="">
      </td>
    </tr>
  </tbody>
</table>
<div class="form-group ">
  <label class="col-md-4 control-label">BILL TOTAL:</label>
  <div class="col-md-4">
    <input type="text" placeholder="Amount" class="form-control 
                 input-xs" name="tot" class="TieTotal" value="">
  </div>

我不知道需要进行哪些更改来解决此问题，请帮助我。

Answer 1

1）您的每个输入都有2个班级，请确保访问您的“ tr td输入”。

2）如果您需要任何代码更改，只需询问

//script
$(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4)', function(){
    var total = 0;
    var tr = $(this).parent();
    var qty = tr.find('td:nth-child(4)').find('input').val();
    var rate = tr.find('td:nth-child(5)').find('input').val();
    var amount = qty*rate;
    tr.find('td:nth-child(6)').find('input').val(amount);

    var tbody = tr.parent();

    $(tbody).find('tr').each(function(){
        total += Number($(this).find('td:nth-child(6)').find('input').val());          
    });

    $('.TieTotal').val(total);
})

Answer 2

请在您的JavaScript代码中尝试一下。这可以超出您的?- parentOf(X, Y). X = bob, Y = anne ; X = bob, Y = mary. ?- parentOf(X, mary). X = bob. 函数之外。

$(document).ready