JQuery HTML 垂直遍历表输入单元格



我有一个有四列的表格。

我希望用户捕获任何单个列中所有输入单元格中的值。

==> 符号化 ENTER 键示例:如果用户决定仅捕获 Day02 列中的值,则表遍历应为:124==>127==>130==>134

如果用户决定仅捕获 Day03 列中的值,则表遍历应为:126==>129==>130==>131

有些人可以使用jquery,keyup事件处理程序和focus()方法编写报价吗?

提前谢谢你

<table border="1" cellpadding="0" cellspacing="0" id="keytable" style="width: 500px;">
<tbody>
    <tr>
        <th id="headcol">Data Element</th>
        <th>Day01</th>
        <th>Day02</th>
        <th>Day03</th>
    </tr>
    <tr>
        <td id="headcol"><strong>medical dose A</strong></td>
        <td id="actdata"><input id="124"/></td>
        <td id="actdata"><input id="125"/></td>
        <td id="actdata"><input id="126"/></td>
    </tr>
    <tr>
        <td id="headcol"><strong>medical dose B</strong></td>
        <td id="actdata"><input id="127"/></td>
        <td id="actdata"><input id="128"/></td>
        <td id="actdata"><input id="129"/></td>
    </tr>
    <tr>
        <td id="headcol"><strong>medical dose C</strong></td>
        <td id="actdata"><input id="130"/></td>
        <td id="actdata"><input id="131"/></td>
        <td id="actdata"><input id="132"/></td>
    </tr>
    <tr>
        <td id="headcol"><strong>medical dose D</strong></td>
        <td id="actdata"><input id="133"/></td>
        <td id="actdata"><input id="134"/></td>
        <td id="actdata"><input id="135"/></td>
    </tr>
   </tbody>
</table>    

我不能为你写代码。但我可以对可能的解决方案提出建议。您可以在每列上保留不同的类。

例如

   <tr>
       <td class="c1"></td>
       <td class="c2"></td>
       <td class="c3"></td>
     </tr>
     <tr>
       <td class="c1"></td>
       <td class="c2"></td>
       <td class="c3"></td>
     </tr>

然后使用要获取列值的列的类名。

例如,对于第一列

var firstColumnItems = document.getElementsByClassName("c1");

感谢您@nevermind的贡献。以下代码从 On enter 键移动到表中的下一个单元格已部分解决了我的问题。

代码是

var inputs = $("#keytable :input");
inputs.on("keypress keyup",function(e) { 
    if (e.keyCode == 13) {
        var $this = $(this),
            index = $this.closest('td').index();
        $this.closest('tr').next().find('td').eq(index).find('input').focus();
        e.preventDefault();
        e.stopPropagation();
    }
});

但是,在此应用程序的核心中,还有另一个按键/键启动事件,该事件在添加我自己的按键/键后触发。前者将光标移动到同一行中的下一个单元格,后者将鼠标光标移动到同一列中的下一个单元格,就像我想要的那样。有没有办法在不删除前者代码的情况下抑制/防止前者在我的键表对象上触发?

最新更新