javascript - 使用 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);
})