<table>
<thead>
<th>Item</th>
<th>Cost</th>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 2</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 3</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 4</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Item 5</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
<tr>
<td>Total</td>
<td>
<label id="total">0</label>
</td>
</tr>
</tbody>
</table>
$('body').on('keyup','.elm',function(){
var sum = 0;
$('.elm').each(function() {
if($(this).val() != '' && !isNaN($(this).val())){
sum += parseInt($(this).val());
}
});
$('#total').text(sum);
})
我使用了这个代码,但这仅适用于5个输入。但是我需要一个程序,它可以动态地添加无限数量的用户输入值并自动计算其输出总和,并在用户输入数字以外时提醒用户。修改我必须在这段代码中帮助我。提前谢谢你。
答案 0 :(得分:0)
您可以使用以下代码添加带有输入的添加行。
在<table>
:
在JS中:
var $table = $('table');
var newRow = '<tr><td>Item {{num}}</td><td><input type="text" class="elm" /></td></tr>';
function addRow() {
var count =$table.find('tr').length + 1;
$table.append( newRow.replace( '{{num}}', count ) );
}
$('body').on('keyUp', '.elm', function(e) {
e.preventDefault();
var key = (e.keyCode) ? e.keyCode : e.which;
if (key === 13) { //user pressed enter
addRow();
} else {
$('.elm').each(function() {
var val =$(this).val();
if( val && !isNaN(val) ){
sum += parseInt(val,10);
}
});
$('#total').text(sum);
}
});
答案 1 :(得分:0)
只需添加一个链接即可在表格下方生成新行,并将其放入js文件中:
$('a').on('click',function(){
var itemNr = $('table tr').length;
$('tbody').append('<tr><td>Item '+itemNr+'</td><td><input type="text" class="elm" /></td></tr>');
});
链接到正在运行的jsfiddle:http://jsfiddle.net/8s8f145n/
或者如果你想保留你的结构,你可以在它的最后一行“之前”插入它而不是“追加”它。
$('table tr:last').before('<tr><td>Item '+itemNr+'</td><td><input type="text" class="elm" /></td></tr>');