Javascript：在关键事件输入计算它们的总和

Question

我是JavaScript和它的事件新手。这是我的表格的HTML代码，我有一个收入标题和它的各自的价格。

<table class="table table-hover table-bordered" id="incomeId"> 
    <thead> 
    <tr> 
     <th> sn </th> 
     <th> Title of income </th> 
     <th> Price </th> 
     <th> Action </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td> 
     <select name="name" id="inputID" class="form-control"> 
      <option value=""> -- Select One --</option>       
     </select> 
     </td> 
     <td> 
     <input type="text" name="name" id="income_price" class="form-control income" value="" title="" required="required"> 
     </td> 
     <td> 
     <span class="glyphicon glyphicon-trash"></span> 
     </td> 

    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td></td> 
     <td></td> 
     <td> Total: <div class="total" id="total"></div> </td> 
     <td></td> 
    </tr> 
    </tfoot> 
</table> 

<button type="button" class="btn btn-info" id="add-new">Add New Income</button> 

于表JavaScript代码添加新行，

$('#add-new').on('click', function() { 
     $("#incomeId").each(function() { 

      var tds = '<tr>'; 

      jQuery.each($('tbody tr:last td', this), function() { 
       tds += '<td>' + $(this).html() + '</td>'; 
      }); 

      tds += '</tr>'; 
      if ($('tbody', this).length > 0) { 
       $('tbody', this).append(tds); 
      } else { 
       $(this).append(tds); 
      } 
     }); 
    }); 

但我想从一个总段的所有价格段，并和每一个价格表创建新行之前。当我创建新行时，最近创建的价格应该添加到前一个总价中。 请帮我找出解决方案。

Answer 1

所以你有一堆动态插入的输入，你想绑定到一个updateTotal事件处理程序？

最简单的选择是简单地将您的事件处理程序绑定到静态包装元素。我会建议一个表单元素，但由于您的示例中没有一个，表体可能是另一个选项。

$('table#incomeId > tbody').on('keyup', 'input', function(e){ 

     var total = 
      $(e.delegateTarget) 
       .find('input') 
      .map(function(){ 
       return parseFloat($(this).val()) || 0; 
      }) 
      .get() 
      .reduce(function(a,b){ 
       return a + b; 
      }); 

     $('#total').text(total); 


    }); 

$('#add-new').on('click', function() { 
 
    $("#incomeId").each(function() { 
 
    
 
    var tr = $('tbody > tr:last', this).clone(); 
 
    tr.find('input').val(''); 
 
    var sntd = tr.find('td:first'); 
 
    var sn = parseInt(sntd.text()) + 1; 
 
    sntd.text(sn); 
 
    
 
    $('tbody', this).append(tr); 
 
    
 
    
 
    
 
    return; 
 

 
    }); 
 
}); 
 

 
$('table#incomeId > tbody').on('keyup', 'input', function(e) { 
 

 
    var total = 
 
    $(e.delegateTarget) 
 
    .find('input') 
 
    .map(function() { 
 
     return parseFloat($(this).val()) || 0; 
 
    }) 
 
    .get() 
 
    .reduce(function(a, b) { 
 
     return a + b; 
 
    }); 
 

 
    $('#total').text(total); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover table-bordered" id="incomeId"> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     sn 
 
     </th> 
 
     <th> 
 
     Title of income 
 
     </th> 
 
     <th> 
 
     Price 
 
     </th> 
 
     <th> 
 
     Action 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td> 
 
     <select name="name" id="inputID" class="form-control"> 
 
      <option value=""> -- Select One --</option>       
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="name" id="income_price" class="form-control income" value="" title="" required="required"> 
 
     </td> 
 
     <td> 
 
     <span class="glyphicon glyphicon-trash"></span> 
 
     </td> 
 

 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td>Total: 
 
     <div class="total" id="total"></div> 
 
     </td> 
 
     <td></td> 
 
    </tr> 
 
    </tfoot> 
 
</table> 
 

 
<button type="button" class="btn btn-info" id="add-new">Add New Income</button>