Jquery moltiplica i dati nell’array della casella di testo

Ho provato ma funziona solo prima fila. Voglio aggiungere la seconda riga multiple quantity_box e unit_price quindi visualizzare il prezzo senza cambiare

$('.a,.b').keyup(function(){ var textValue1 =$(this).parent().find('.a').val(); var textValue2 = $(this).parent().find('.b').val(); $(this).parent().find('.price').val(textValue1 * textValue2); }); hereis my new html          

Questo non funziona per la seconda riga, perché l’attributo id deve essere unico, ciò significa che non puoi avere due input con id="a" o id="b" o id="price" . Invece puoi usare l’attributo class , quindi ogni id dovrebbe essere convertito in una class, proprio come questo:

 $('.a,.b').keyup(function(){ var textValue1 =$(this).parent().find('.a').val(); var textValue2 = $(this).parent().find('.b').val(); $(this).parent().find('.price').val(textValue1 * textValue2); var sum = 0; $(".price").each(function() { sum += +$(this).val(); }); $("#total").val(sum); }); 
  
display in
display in

Prima di tutto, alcune cose devono essere corrette nel tuo codice.

Non dovresti usare lo stesso identico id su più elementi. id attributi id dovrebbero essere unici per l’intera pagina. Ecco perché funziona solo per il primo set di input. Utilizzare invece le classi.

Inoltre, gli input restituiscono valori di testo. Non vuoi usarli così come sono. Dovresti usare parseFloat() e / o parseInt() per convertirli in numeri, e vuoi anche convalidare l’input (assicurati che sia in realtà un numero, piuttosto che un testo, come ‘abc’).

Infine, è necessario avvolgere i tuoi input in

altrimenti non riuscirà a eseguire correttamente il rendering in alcuni casi.

Ci sono poche altre cose che dovrebbero essere ripulite (spazi bianchi incoerenti nei tuoi attributi), ma non ne parlerò ora.

Ora avanti alla soluzione.

Ora, in questo caso, vuoi gestire l’evento click su un insieme di input, e poi vuoi capire il multiplo. Puoi farlo legando il listener di eventi all’elemento table. È necessario utilizzare l’evento di input anziché keyup perché non tutte le modifiche dagli input provengono da eventi chiave (ad esempio, se si incolla un valore nell’input utilizzando il mouse, non verrà catturato da keyup ).

Nel gestore di eventi, si desidera attraversare l’albero DOM fino al genitore dell’input e da questo ottenere un set di input su cui si desidera lavorare.

Mettendo la maggior parte di ciò che è stato discusso insieme ottieni del codice che può assomigliare a questo:

 $('#mytable').on('input', function (event) { var elem = $(event.target); // <-- this is the  element // From the input element, go up one level to the  element var parent = elem.parent(); // Find all the elements we'll be using using the 'name' attribute var qtty = parent.find('input[name="quantity_box[]"]'); var uprice = parent.find('input[name="unit_price[]"]'); var price = parent.find('input[name="price[]"]'); // Leaving validation out for brevity, update the price price.val(parseFloat(qtty.val()) * parseFloat(uprice.val())); }); 
display in
display in

Come ho detto nei commenti, ho lasciato la validazione per brevità, quindi a volte vedrai NaN nell’output. Una volta che la convalida è a posto, vedrai l’output corretto.

Ecco un violino con il codice di lavoro:

https://jsfiddle.net/foxbunny/nowcfrbo/