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>