Javascript: les entrées sur l'événement key-key calculent leur somme

Question

Je suis nouveau sur javascript et ses événements. Voici mon code html pour la table, où j'ai un titre de revenu et son prix respectif.

<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> 

Pour ajouter une nouvelle ligne dans la table code javascript est

$('#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); 
      } 
     }); 
    }); 

Mais je veux obtenir le prix de toute section de prix et somme à chacun dans une section totale avant de créer une nouvelle ligne dans le tableau. Lorsque je crée la nouvelle ligne, le prix récemment créé doit être ajouté au prix total précédent. S'il vous plaît aidez-moi à trouver la solution.

Answer 1

Vous avez donc un tas d'entrées insérées dynamiquement que vous souhaitez lier à un gestionnaire d'événements updateTotal?

L'option la plus facile consiste simplement à lier votre gestionnaire d'événements à un élément wrapper statique. Je suggérerais un élément de formulaire, mais puisque vous n'en avez pas dans votre exemple, le corps de la table peut être une autre option.

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