Значения суммы столбца таблицы с использованием jQuery

Question

У меня динамически создается table. В загрузке страницы есть один столбец, но он заполняет значения, когда я выбираю количество выпадающего меню (другое столбец) и значение цены по умолчанию (другой столбец). Я хочу добавить общие значения, созданные этим процессом, с помощью jQuery и отобразить общее значение.

Есть ли у кого-нибудь идеи, как я могу это сделать? Я пробовал много, но результатов не было.

Я стараюсь это:

$(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 (где будет отображаться результат):

<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' выпадающее меню от 1 до 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> 

ВНИМАНИЕ:

С olumn total создается после создания таблицы. Я выбираю значение раскрывающегося списка и делает этот процесс (значение раскрывающегося списка * цены). Отображается в общей сумме столбца.

ОБНОВЛЕНО (я использую этот скрипт, но результат в id='sum' является 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.

То, что я предлагаю, чтобы избежать использования идентификаторов и классов использовать вместо:

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); 
} 

Надеется, что это помогает.

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>