jquery keyup, keydown doesn't work in table with multiple row

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>

I have tried with .live , keypress etc. But same problem exists. — user3764374
– user3764374, Commented Aug 24, 2014 at 9:54

Jakub Kotula · Accepted Answer · 2014-08-24 10:03:23Z

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();
    }
});

answered Aug 24, 2014 at 10:03

Jakub Kotula

2411 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3764374 Over a year ago

Thank you Jakub. But I need to focus to the 1st input box at next tr when user press enter at the last input box( in last td). I also mention that there is two <select> box in every tr of this table, which I did not write here I want to focus next for those <select> too.

Sumurai8 · Accepted Answer · 2014-08-24 10:12:40Z

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.

Collectives™ on Stack Overflow

jquery keyup, keydown doesn't work in table with multiple row

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related