<table>
<thead>
<th>item</th>
<th>Cost</th>
</thead>
<tbody id="tbody">
<tr>
<td>Item 1</td>
<td>
<input type="text" class="elm" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>
<label id="total">0</label>
</td>
</tr>
</tfoot>
$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
if (e.keyCode != 13) {
var sum = 0;
$('.elm').each(function() {
if($(this).val() != '' && !isNaN($(this).val())){
sum += parseInt($(this).val());
}
});
$('#total').text(sum);
}
else{
var $itemNum = $('#tbody tr');
if($itemNum.find('input').val().length > 0)
{
var itemNum = $('#tbody tr').length + 1;
var newRow = '<tr>'+
'<td>Item'+itemNum+'</td>'+
'<td>'+
'<input type="text" class="elm">'+
'</td>'+
'</tr>';
$('#tbody').append(newRow);
}
}
});
我正在使用上面的代码在用户动态输入时添加数字值,方法是通过按键盘上的Enter键添加新文本字段,而不管用户输入的输入数字是多少,并自动计算其输出。通过按EnterKey,i仅在用户在先前文本字段中输入值后才追加新文本字段,并且光标应自动移动到新文本字段。但在我的代码中,它仅在第一个文本字段中发生,而在其他文本字段中则不一样,请帮助我编码,我是javascript新手。
嘿,您似乎只想检查最后一个输入字段的长度。所以只需添加.last()
到选择器中即可:var $ itemNum = $('#tbody tr')。last();
$('body').on('keyup','.elm',function(e){
//Check Key Press is Enter
console.log(e.keyCode);
if (e.keyCode != 13) {
console.log('Enter detected');
var sum = 0;
$('.elm').each(function() {
if($(this).val() != '' && !isNaN($(this).val())){
sum += parseInt($(this).val());
}
});
$('#total').text(sum);
}
else{
var $itemNum = $('#tbody tr').last();
if($itemNum.find('input').val().length > 0)
{
console.log('should add new input');
var itemNum = $('#tbody tr').length + 1;
var newRow = '<tr>'+
'<td>Item'+itemNum+'</td>'+
'<td>'+
'<input type="text" class="elm">'+
'</td>'+
'</tr>';
$('#tbody').append(newRow);
}
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句