jquery keyup, keydown не работает в таблице с несколькими строками

У меня есть таблица, в которой 200 строк. Jquery keyup или keydown не работают. Мой код jquery:

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

На самом деле я хочу сфокусироваться или перейти в поле ввода, которое находится в следующем тд. Это работает с 1-м тр, но не в остальных 199 тр. Вот 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>

javascript jquery keydown keyup
person user3764374    schedule 24.08.2014    source источник
comment
Часть HTML-кода, пожалуйста.   -  person Jakub Kotula    schedule 24.08.2014
comment
Я пробовал с .live , нажатием клавиши и т. д. Но существует та же проблема.   -  person user3764374    schedule 24.08.2014

Ответы (2)


arrow_upward
0
arrow_downward

Проблема заключается в том, что :eq(n) выбирает элемент nth из предыдущего выбора. То есть коллекция всех td, которые являются дочерними элементами tr tbody элемента с классом upd_tab. В основном он ведет себя так: $($('.upd_tab tbody tr td')[2]) (и ввод под этим элементом). Если бы вы использовали :eq(10), он выбрал бы поле ввода во второй строке.

Вам нужно :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();
});

Чтобы было легче понять, какие элементы выбираются, раскрасьте их, например, с помощью .css( { 'background': 'blue' } );. Это даст вам визуальное представление о том, что происходит.

person Sumurai8    schedule 24.08.2014

arrow_upward
1
arrow_downward

Попробуй это:

$('.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();
    }
});
person Jakub Kotula    schedule 24.08.2014
comment
Спасибо, Якуб. Но мне нужно сосредоточиться на 1-м поле ввода при следующем tr, когда пользователь нажимает ввод в последнем поле ввода (в последнем td). Я также упоминаю, что в каждом tr этой таблицы есть два поля ‹‹select›, которые я здесь не писал. Я хочу сосредоточиться на этих ‹select›. - person user3764374; 24.08.2014