Summenwerte einer Tabellenspalte mit jQuery

Question

Ich habe dynamisch eine table erstellt. Beim Laden der Seite ist eine Spalte leer, füllt aber Werte, wenn ich die Menge eines Dropdown-Menüs (andere Spalte) und einen Standardpreiswert (andere Spalte) wähle. Ich möchte die Gesamtwerte dieses Prozesses mit jQuery hinzufügen und den Gesamtwert anzeigen.

Hat jemand irgendwelche Ideen, wie kann ich das tun? Ich habe viel versucht, aber keine Ergebnisse erschienen.

ich versuche, diesen:

$(document).each("[id^=total]", function(event){ 
    var num = this.id.slice(5); 
    var sum = 0; 

    var value = $('#total'+num).text(); 
    sum += parseFloat(this.value); 

    $('#sum').text(sum); 
}); 

HTML (in dem das Ergebnis angezeigt wird):

<tr> 
    <th colspan="6" style="text-align:right">Total:</th> 
    <th colspan="2" style="text-align:center"><span id="sum"></span></th> 
</tr> 

HTML (id = 'qua2' ist ein Drop-Down-Menü von 1 bis 20):

<tr> 
    <td><center><selectclass='choose'id='qua2'></select></center></td> 
    <td><center><spanid='yprice2'>101.10</span></center></td> 
    <td><center><spanid='total2'></span></center></td> 
</tr> 

HINWEIS:

C olumn total wird nach der Tabellenerstellung erstellt. Ich wähle einen Wert von Dropdown und macht diesen Prozess (Wert von Dropdown * Preis) .Result in der Spalte Gesamt angezeigt.

AKTUALISIERT (ich benutze dieses Skript, aber das Ergebnis in id='sum' ist NaN):

$(document).on('change', "[id^=qua]", function(event){ 
var num = this.id.slice(3); 
var sum = 0; 
var value = $("#qua"+num).val(); 
var yprc = $("#yprice"+num).text(); 
var amount = value * yprc; 
amount = amount.toFixed(2); 

var $sum = $("#sum"); 
var $total = $("#total"+num); 

    $total.html(amount); 

$("[id^=total]").each(function(){ 
sum += parseFloat($(this).text()); 
}); 
$sum.text(sum); 
}); 

Answer 1

Working fiddle.

Was ich vorschlagen, ist die Verwendung von IDs und Nutzungsklassen statt zu vermeiden:

dies hilft

calc_total(); 

$(".choose").on('change', function(){ 
    var parent = $(this).closest('tr'); 
    var price = parseFloat($('.price',parent).text()); 
    var choose = parseFloat($('.choose',parent).val()); 

    $('.total',parent).text(choose*price); 

    calc_total(); 
}); 

function calc_total(){ 
    var sum = 0; 
    $(".total").each(function(){ 
    sum += parseFloat($(this).text()); 
    }); 
    $('#sum').text(sum); 
} 

Hoffnung.

calc_total(); 
 

 
$(".choose").on('change', function(){ 
 
    var parent = $(this).closest('tr'); 
 
    var price = parseFloat($('.price',parent).text()); 
 
    var choose = parseFloat($('.choose',parent).val()); 
 

 
    $('.total',parent).text(choose*price); 
 

 
    calc_total(); 
 
}); 
 

 
function calc_total(){ 
 
    var sum = 0; 
 
    $(".total").each(function(){ 
 
    sum += parseFloat($(this).text()); 
 
    }); 
 
    $('#sum').text(sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border=1> 
 
    <tr> 
 
    <td> 
 
     <center> 
 
     <select class='choose'> 
 
      <option value='1'>1</option> 
 
      <option value='2'>2</option> 
 
      <option value='3'>3</option> 
 
     </select> 
 
     </center> 
 
    </td> 
 
    <td> 
 
     <center> 
 
     <span class='price'>100</span> 
 
     </center> 
 
    </td> 
 
    <td> 
 
     <center> 
 
     <span class='total'>100</span> 
 
     </center> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <center> 
 
     <select class='choose'> 
 
      <option value='1'>1</option> 
 
      <option value='2'>2</option> 
 
      <option value='3'>3</option> 
 
     </select> 
 
     </center> 
 
    </td> 
 
    <td> 
 
     <center> 
 
     <span class='price'>100</span> 
 
     </center> 
 
    </td> 
 
    <td> 
 
     <center> 
 
     <span class='total'>100</span> 
 
     </center> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <center> 
 
     <select class='choose'> 
 
      <option value='1'>1</option> 
 
      <option value='2'>2</option> 
 
      <option value='3'>3</option> 
 
     </select> 
 
     </center> 
 
    </td> 
 
    <td> 
 
     <center> 
 
     <span class='price'>100</span> 
 
     </center> 
 
    </td> 
 
    <td> 
 
     <center> 
 
     <span class='total'>100</span> 
 
     </center> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2" style="text-align:right">Total:</th> 
 
    <th colspan="2" style="text-align:center"><span id="sum"></span></th> 
 
    </tr> 
 
</table>