在动态创建的输入上使用向下箭头键将光标移动到下一个输入答案

【问题标题】：Moving cursor to the next input using down arrow key on dynamically created input在动态创建的输入上使用向下箭头键将光标移动到下一个输入
【发布时间】：2016-03-10 10:37:06
【问题描述】：

我有一个动态创建的行和输入的表格，我想做的是当按下向下/向上箭头时，光标可以移动到下一个或上一个文本输入而不使用鼠标。我试过一个，但似乎不适合我。

动态生成行的表格

<table cellspacing="0" cellpadding="0" border="0" align="center" class="dave-table" id="TabsTabeUniformity">
            <tbody><tr><th id="counter">No of rows: 3</th>
            </tr></tbody><tbody>                
            <tr>
                <td height="53"><div align="center">No.</div></td>
                <td valign="middle" align="center"><p align="center">Tablets (mg)</p></td>
                <td><button id="addRow">+ Add Row</button></td>
            </tr>
           <tr><td><div align="center">1</div></td>
                       <td><input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"></td>
                       <td><button id="remRow">-Remove</button></td>
                   </tr><tr><td><div align="center">2</div></td>
                       <td><input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"></td>
                       <td><button id="remRow">-Remove</button></td>
                   </tr><tr><td><div align="center">3</div></td>
                       <td><input type="text" tabindex="1" required="" class="num" size="25" name="tabdata[]" id="tcsv1"></td>
                       <td><button id="remRow">-Remove</button></td>
                   </tr><tr>
                <td><div align="center">Average</div></td>
                <td><input type="text" readonly="" name="average" id="av1"></td>

            </tr>
            </tbody>

            <input type="hidden" id="tabStatus" name="tablet">          
        </table>

我正在尝试使用的 javascript

$(document).on('keydown','#TabsTabeUniformity > tbody tr.num',function (e) {
    if (e.which === 40) {

        $(this).closest('td').nextAll().eq(1).find('.num').focus()
    }
 });

非常感谢任何建议

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

尝试用这个替换你的javascript：

$(document).on('keydown','#TabsTabeUniformity > tbody tr .num',function (e) {
    if (e.which === 40) {
      $(this).parents("tr").next("tr").find('.num').focus();
    }
 });

还要注意第一行中tr 和.num 之间的空格，因为在您的代码中，您搜索的是<tr> 类num 而不是它的子类

【讨论】：

【解决方案2】：

也可以在不引用类或 id 的情况下使用它，或者如果您将单元格/输入添加到一行：

 $("input").keydown(function (e) {

    var cellindex = $(this).parents('td').index();

    if (e.which == 40) {
              $(e.target).closest('tr').nextAll('tr').find('td').eq(cellindex).find(':text').focus();
    }
    if (e.which == 38) {
    $(e.target).closest('tr').prevAll('tr').first().find('td').eq(cellindex).find(':text').focus();
    }

});

【讨论】：