Question

HTML

<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>

jquery的

$('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，我应该只在用户在前一个文本字段中输入值后添加新的文本字段，并且光标应自动移动到新的文本字段。但在我的代码中它只发生在第一个文本字段而不是其他的相同，请帮助我编码我是javascript的新手。

Answer 1

http://jsfiddle.net/72ene5ob/

嘿，看起来你只想检查最后一个输入字段的长度。所以只需将.last()添加到您的选择器：var $ itemNum = $（＆＃39; #tbody tr＆＃39;）。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);
}
}
});

Answer 2

我通过添加以下代码行作为else块中的最后一行来扩展David Karlsson的答案：

     $('#tbody tr:last-child td:last-child input').focus();

然后，新添加的行的输入获得焦点。

Fiddle

仅当填充活动文本字段时，才能将文本字段的光标从活动文本字段移动到新附加的文本字段，然后输入从键盘按下的键

HTML

jquery的

2 个答案: