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

63
8

У меня есть таблица, которая имеет 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();
});

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

спросил(а) 2021-01-25T14:26:50+03:00 4 месяца, 2 недели назад
1
Решение
63

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

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

ответил(а) 2021-01-25T14:26:50+03:00 4 месяца, 2 недели назад
45

Проблема, с которой вы сталкиваетесь, заключается в следующем :eq(n) выбирает n-й элемент из предыдущего выбора. То есть, сбор всех td, являющихся дочерним элементом tr элемента тела с классом 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' } ); , Это даст вам визуальное представление о том, что происходит.

ответил(а) 2021-01-25T14:26:50+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема