多个文本框值添加输出不显示最后一个文本框值

Question

我想通过将具有id ='final'的文本框中的所有单个金额相加来显示具有id ='total'的文本框中的总金额。当我添加值时，只有最终id文本框中的最后一个值显示为输出。

html代码：

<p>product invoice</p>    
<table>
<tr>
<td>qty</td>
<td>rate</td>
<td>amount</td>
<td>final</td>
</tr>
<tr>
<td><input type="text" id="qty" name="qty" style="width:50%"></td> 
<td><input type="text" id="rate" name="rate" value="10"></td>    
<td><input type="text" id="amount" name="amount" value="0"></td>  
<td><input type="text" id="final" name="final" value="0"></td>
</tr> 
<tr>
<td><input type="text" id="qty" name="qty" style="width:50%"></td>     
<td><input type="text" id="rate" name="rate" value="10"></td>    
<td><input type="text" id="amount" name="amount" value="0"></td>  
<td><input type="text" id="final" name="final" value="0"></td>
</tr> 
<tr>
<td><input type="text" id="qty" name="qty" style="width:50%"></td>     
<td><input type="text" id="rate" name="rate" value="10"></td>    
<td><input type="text" id="amount" name="amount" value="0"></td>  
<td><input type="text" id="final" name="final" value="0"></td>
</tr> 
<td colspan="2">Total Bill amount:</td>
<td colspan="2"><input type="text" id="total" name="total" value="0"></td>
</table>

jquery代码：

    $('input[name=rate]').on('blur',function(){
    var rate = $(this).val();
    var qty = $(this).parent().parent().find('#qty').val();    
    var amount = parseInt(rate,10)*parseInt(qty,10);
    $(this).parent().parent().find('#amount').val(amount); 
    });

    $('input[name=amount]').on('blur', function(){
    var amount = $(this).parent().parent().find('#amount').val();
        alert(amount);
    var taxamount = parseFloat((amount*0.18)+parseInt(amount));
    var final = $(this).parent().parent().find('#final').val(taxamount);     
    var total = +parseFloat(taxamount);
    //var total = parseInt(amount,10)+parseInt(final,10);
        alert(total);
    $(this).parent().parent().parent().find('#total').val(total);
    });

我没有问到哪里出了问题？

Answer 1

当您的模糊事件发生时，由于此代码，您的jquery中存在var total = +parseFloat(taxamount);的小错误 新的总变量分配了空白值，因此不是在函数外部声明total变量，而是blur只需在总计中添加新值。
是的，因为Satpal在评论中说使用类而不是id

请参阅以下代码：

＆＃13;

＆＃13;

var total = 0;
 $('input[name=rate]').on('blur',function(){
    var rate = $(this).val();
    var qty = $(this).parent().parent().find('.qty').val();    
    var amount = parseInt(rate,10)*parseInt(qty,10);
    $(this).parent().parent().find('.amount').val(amount); 
    });

    $('input[name=amount]').on('blur', function(){
    var amount = $(this).parent().parent().find('.amount').val();
        alert(amount);
    var taxamount = parseFloat((amount*0.18)+parseInt(amount));
    var final = $(this).parent().parent().find('.final').val(taxamount);     
    total += parseFloat(taxamount);
    //var total = parseInt(amount,10)+parseInt(final,10);
        alert(total);
    $(this).parent().parent().parent().find('.total').val(total);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>product invoice</p>    
<table>
<tr>
<td>qty</td>
<td>rate</td>
<td>amount</td>
<td>final</td>
</tr>
<tr>
<td><input type="text" class="qty" name="qty" style="width:50%"></td> 
<td><input type="text" class="rate" name="rate" value="10"></td>    
<td><input type="text" class="amount" name="amount" value="0"></td>  
<td><input type="text" class="final" name="final" value="0"></td>
</tr> 
<tr>
<td><input type="text" class="qty" name="qty" style="width:50%"></td>     
<td><input type="text" class="rate" name="rate" value="10"></td>    
<td><input type="text" class="amount" name="amount" value="0"></td>  
<td><input type="text" class="final" name="final" value="0"></td>
</tr> 
<tr>
<td><input type="text" class="qty" name="qty" style="width:50%"></td>     
<td><input type="text" class="rate" name="rate" value="10"></td>    
<td><input type="text" class="amount" name="amount" value="0"></td>  
<td><input type="text" class="final" name="final" value="0"></td>
</tr> 
<td colspan="2">Total Bill amount:</td>
<td colspan="2"><input type="text" class="total" name="total" value="0"></td>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以处理常见的模糊event输入元素，而不使用id配置name。

<强>样本

＆＃13;

＆＃13;

$('input[name=rate],input[name=qty],input[name=amount]').on('blur', function(e) {
  var tr = $(e.target).closest('tr'),
    rate = tr.find('input[name=rate]').val() || 0,
    qty = tr.find('input[name=qty]').val() || 0,
    amount = parseInt(rate, 10) * parseInt(qty, 10),
    taxamount = parseFloat((amount * 0.18) + parseInt(amount)),
    total = 0;

  tr.find('input[name=amount]').val(amount);
  tr.find('input[name=final]').val(taxamount.toFixed(2));
  
  $('[name=final]').each((i, el) => {
    total += parseFloat($(el).val() || 0);
  });
  
  $('[name=total]').val(total.toFixed(2));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>product invoice</h1>
<table>
  <tr>
    <td>qty</td>
    <td>rate</td>
    <td>amount</td>
    <td>final</td>
  </tr>
  <tr>
    <td><input type="text" name="qty" style="width:50%"></td>
    <td><input type="text" name="rate" value="10"></td>
    <td><input type="text" name="amount" value="0"></td>
    <td><input type="text" name="final" value="0"></td>
  </tr>
  <tr>
    <td><input type="text" name="qty" style="width:50%"></td>
    <td><input type="text" name="rate" value="10"></td>
    <td><input type="text" name="amount" value="0"></td>
    <td><input type="text" name="final" value="0"></td>
  </tr>
  <tr>
    <td><input type="text" name="qty" style="width:50%"></td>
    <td><input type="text" name="rate" value="10"></td>
    <td><input type="text" name="amount" value="0"></td>
    <td><input type="text" name="final" value="0"></td>
  </tr>

  <td colspan="2">Total Bill amount:</td>
  <td colspan="2"><input readonly type="text" name="total" value="0"></td>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下是工作代码：

请参阅JSFIDDLE链接：https://jsfiddle.net/divyachandana/vb2c5d9b/39/

＆＃13;

＆＃13;

function totalSum() {
  var result = 0;
  $('table tr').each(function() {
    $('td', this).each(function(index, val) {
      if (index == 3) {
        var a = $(this).parent().find('#final').val();
        result += parseFloat(a);
      }
    });
  });
  return parseFloat(result).toFixed(2);
}

$('input[name=rate]').on('blur', function() {
  var rate = $(this).val();
  var qty = $(this).parent().parent().find('#qty').val();
  var amount = parseInt(rate, 10) * parseInt(qty, 10);
  $(this).parent().parent().find('#amount').val(amount);
});

$('input[name=amount]').on('blur', function() {
  var amount = $(this).parent().parent().find('#amount').val();
  var taxamount = parseFloat((amount * 0.18) + parseInt(amount));
  var final = $(this).parent().parent().find('#final').val(taxamount);

  var total = totalSum();
  $(this).parent().parent().parent().find('#total').val(total);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>product invoice</p>
<table>
  <tr>
    <th>qty</th>
    <th>rate</th>
    <th>amount</th>
    <th>final</th>
  </tr>
  <tr>
    <td><input type="text" id="qty" name="qty" style="width:50%"></td>
    <td><input type="text" id="rate" name="rate" value="10"></td>
    <td><input type="text" id="amount" name="amount" value="0"></td>
    <td><input type="text" id="final" name="final" value="0"></td>
  </tr>
  <tr>
    <td><input type="text" id="qty" name="qty" style="width:50%"></td>
    <td><input type="text" id="rate" name="rate" value="10"></td>
    <td><input type="text" id="amount" name="amount" value="0"></td>
    <td><input type="text" id="final" name="final" value="0"></td>
  </tr>
  <tr>
    <td><input type="text" id="qty" name="qty" style="width:50%"></td>
    <td><input type="text" id="rate" name="rate" value="10"></td>
    <td><input type="text" id="amount" name="amount" value="0"></td>
    <td><input type="text" id="final" name="final" value="0"></td>
  </tr>
  <td colspan="2">Total Bill amount:</td>
  <td colspan="2"><input type="text" id="total" name="total" value="0"></td>
</table>

＆＃13;

＆＃13;

＆＃13;