Question

我有一个有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的输入框。这适用于1st 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>

Answer 1

试试这个：

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

您遇到的问题是:eq(n)从上一个选择中选择第n个元素。也就是说，所有td的集合都是具有upd_tab类的元素的t的子元素。它的行为基本上如下：$($('.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' } );。这将为您提供直观的线索。

jquery keyup，keydown没有在多行的表中工作

2 个答案: