Ajouter un ID unique pour former une entrée pour le total

Question

Le problème que je rencontre est que je travaille sur un système de facturation. Le cas échéant,

$(document).ready(function() { 
    $('#add').click(function() { 
     JQuery('#lineItems').append('<input type="text" name="description[]" 
      class="ui-corner-all text invDesc" /> 
      <input type="text" name="qty[]" class="ui-corner-all text invQty" /> 
      <input type="text" name="amount[]" class="ui-corner-all text invAmount" 
      title="Amount" /> 
      <input type="hidden" name="rowTotal[]" class="row-total-input" />'); 
    }); 
    }); 

pour créer un élément de campagne. L'entrée cachée nommée rowTotal [] est destinée à contenir les totaux de chaque ligne afin qu'ils puissent être additionnés. Le code que je utilise pour obtenir le total de la ligne de qté * montant,

$(function(){ 
    $('.row-total-input').each(
     function(intIndex){ 
      $('.invAmount').livequery('blur', function() { 
        var $this = $(this); 
        var amount = $this.val(); 

        var qty = $this.parent().find('.invQty').val(); 

        if ((IsNumeric(amount)) && (amount != '')) {   
         var rowTotal = qty * amount; 
         $this.css("background-color", "white").parent().find(".row-total-input").val(rowTotal); 
        } else {   
         $this.css("background-color", "#ffdcdc");      
        };   

        calcProdSubTotal();  
        calcOrderTotal(); 
      }); 
     } 
    ); 
}); 

Cependant, il met à jour tous les champs d'entrée rowtotal [] à la dernière ligne totale de sorte que la somme finale n'est pas correcte.

Je suppose que j'ai besoin de créer une sorte d'identifiant unique pour chaque rowTotal [] afin que seule la correcte soit mise à jour. Je ne sais pas comment le faire.

Merci d'avance.

Answer 1

Ah le problème est ici:

var qty = $this.parent().find('.invQty').val(); 

Si chaque ligne aurait un parent distinct ce serait bien, mais tous les « lignes » sont contenues dans le même parent - #lineItems. Ce qui devrait aider est de changer votre code de création de ligne actuel à ceci:

$(document).ready(function() { 
    $('#add').click(function() { 
     JQuery('#lineItems').append('<div><input type="text" name="description[]" 
      class="ui-corner-all text invDesc" /> 
      <input type="text" name="qty[]" class="ui-corner-all text invQty" /> 
      <input type="text" name="amount[]" class="ui-corner-all text invAmount" 
      title="Amount" /> 
      <input type="hidden" name="rowTotal[]" class="row-total-input" /></div>'); 
     //notice the extra div tag that wrapps around all the input fields 
    }); 
});