jquery - 在Jquery中动态添加字段的总和

Question

我想使用表格中的 jquery 添加一周中的小时总和，当文本字段更改 div total_amount 中的总计时，应该更新，但它似乎不起作用。

$(function() {
$("[id$=day]").change(function() {

var total = 0;
$('table input[id$=day]').each(function() {
    var sum_id = this.id;
    total[this.value] += parseInt($('#' + sum_id).val(), 10);
});

    $('div.total_amount').html(total);
});
});

html在这里

<td class="timesheet2"><input type="text" name="daymon" id="monday">
</td>

<td class="timesheet2"><input type="text" name="daytue" id="tuesday">
</td>

<td class="timesheet2"><input type="text" name="daywed" id="wednesday">
</td>

<td class="timesheet2"><input type="text" name="daythurs" id="thursday">
</td>

<td class="timesheet2"><input type="text" name="dayfri" id="friday">
</td>

<td class="timesheet2"><input type="text" name="daysat" id="saturday">
</td>

<td class="timesheet2"><input type="text" name="daysun" id="sunday">
</td>

<td class="timesheet"><div id="total_amount"></div>
</td>

Answer 1

我认为这可能会更好。

var sum = 0;
    $('.timesheet2').each(function() {
        sum += Number($(this).val());
    });

    $('#total_amount').html(sum);
});​​​​​​​​​

Answer 2

您在显示最终值时遇到问题。当您需要 ID 时，您正在使用类选择器。

http://jsfiddle.net/YE5vF/2/

HTML

<table>
<tr>
<td class="timesheet2"><input type="text" name="daymon" id="monday"></td>
<td class="timesheet2"><input type="text" name="daytue" id="tuesday"></td>
<td class="timesheet2"><input type="text" name="daywed" id="wednesday"></td>
<td class="timesheet2"><input type="text" name="daythurs" id="thursday"></td>
<td class="timesheet2"><input type="text" name="dayfri" id="friday"></td>
<td class="timesheet2"><input type="text" name="daysat" id="saturday"></td>
<td class="timesheet2"><input type="text" name="daysun" id="sunday"></td>
<td class="timesheet"><div id="total_amount"></div></td>
</tr>
</table>

JS

$("[id$=day]").change(function() {
    var total = 0;     
    $('.timesheet2 input').each(function() {
        total = total + Number( $(this).val() );
    });
    $('div#total_amount').html(total); 
});