jQuery keyup，keydown在多行表中不起作用

Question

I have a table which has 200 rows. Jquery keyup or keydown are not working. My jquery code is :

$('.upd_tab tbody tr td:eq(2) input').on('keyup',function(e){
        if (e.which==13)
        $(this).parent().parent().find('td').eq($(this).parent().index()+1).find('input').focus();
    });

Actually I want to focus or go to the input box which is located in next td. This works with 1st tr but not in rest 199 trs Here is the HTML.

<tbody>
    <tr id="chz1">
        <td><input maxlength="16"/><div class="bx"></div></td>
        <td><input/><div class="bx"></div></td>
        <td><input maxlength="6"/><div class="bx"></div></td>
        <td><input /></td>
        <td><input /></td>
        <td><input value="1"/><div class="bx"><button class="sbut"></button></div><input type="hidden" class="hinp"/></td>
        <td><input /></td>
        <td><div class="bx"></div></td>
        <td><div class="bx"></div></td>
    </tr>
    <tr id="chz2">
        <td><input maxlength="16"/><div class="bx"></div></td>
        <td><input/><div class="bx"></div></td>
        <td><input maxlength="6"/><div class="bx"></div></td>
        <td><input /></td>
        <td><input /></td>
        <td><input value="1"/><div class="bx"><button class="sbut"></button></div><input type="hidden" class="hinp"/></td>
        <td><input /></td>
        <td><div class="bx"></div></td>
        <td><div class="bx"></div></td>
    </tr>
    <!-- etc -->
</tbody>

Answer 1

Try this one:

$('.upd_tab input').on('keyup',function(e){
    e = e || window.event;
    var code = e.keyCode;
    if (code == '13') {
        $(this).closest('td').next().find('input').focus();
    }
});

Answer 2

The problem you are having is that :eq(n) selects the nth element from the previous selection. That is, the collection of all td's that are a child of a tr of a tbody of an element with the upd_tab class. It behaves basically like this: $($('.upd_tab tbody tr td')[2]) (and the input below that element). If you would use :eq(10) it would select the input box on the second row.

What you want is :nth-child(3) .

$('.upd_tab tbody tr td:nth-child(3) input').on('keyup',function(e){
    if (e.which==13)
        $(this).parent().parent().find('td').eq($(this).parent().index()+1).find('input').focus();
});

For an easier understanding what elements are being selected, consider colouring them, for example with .css( { 'background': 'blue' } ); . This will give you a visual clue what is happening.