Question

我想通过按enter将下一个输入集中在表格字段中。该表如下所示：

<table>
    <tbody>
        <tr>
            <td>Title 1</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr>
            <td>Title 2</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr class="group">
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>Title 3</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr class="group">
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>Title 4</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
    </tbody>
</table>

这是我的JS，专注于下一个输入字段。

'change input[type="number"]': (event) => {
    $(event.target).closest('tr').next(':not(.group)').find('input').focus();
}

这适用于第一个字段。下一个输入字段会得到关注。但我不能专注于第三个输入字段。

我也试过

'change input[type="number"]': (event) => {
    $(event.target).closest('tr').siblings(':not(.group)').find('input').focus();
}

但是焦点设置为最后一个输入字段，我不明白为什么。

Answer 1

问题是jQuery的next()只关注下一个兄弟，而不是所有兄弟姐妹。你想要的是nextAll()：

$(event.target)
    .closest('tr')
    .nextAll('tr:not(.group)')
    .first()
    .find('input')
    .focus();

将焦点设置为表格中的下一个输入字段

1 个答案: