jquery keyup，keydown 在多行表中不起作用答案

【问题标题】：jquery keyup, keydown doesn't work in table with multiple rowjquery keyup，keydown 在多行表中不起作用
【发布时间】：2014-08-24 09:40:27
【问题描述】：

我有一个有 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>

【问题讨论】：

请部分HTML代码。
我试过 .live ， keypress 等，但同样的问题存在。

标签： javascript jquery keydown keyup

【解决方案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();
    }
});

【讨论】：

谢谢Jakub。但是当用户在最后一个输入框（在最后一个 td 中）按 Enter 键时，我需要在下一个 tr 处关注第一个输入框。我还提到，在这个表的每个 tr 中都有两个框，我没有在这里写，我接下来也想重点关注那些。

【解决方案2】：

您遇到的问题是 :eq(n) 从先前的选择中选择了 nth 元素。也就是说，所有 td 的集合，它们是具有 upd_tab 类的元素的 tbody 的 tr 的子级。它的行为基本上是这样的：$($('.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' } );。这将为您提供视觉线索。

【讨论】：