Javascript：keyupイベントの入力は合計を計算します

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イベントハンドラにバインドする入力を動的に挿入していますか？

最も簡単なオプションは、イベントハンドラを静的なラッパー要素に単にバインドすることです。私はフォーム要素を提案しますが、あなたの例では1つもないので、テーブル本体は別のオプションかもしれません。

$('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>