按下输入时移动下一个输入

Question

我有一个html表，它有文本输入。其中一些已禁用，其中一些已启用。我想按下回车键将光标移动到下一个输入文本。我收到了最近的tr和输入代码，但是例如;当第一列完成后，它会转到第二列最接近的输入文本。但它应该是第一个。我该如何解决？

if ($(this).closest('tr', 'td').next().find('.txt', ':enabled')[0] != undefined)
    $(this).closest('tr', 'td').next().find('.txt', ':enabled')[0].focus();

OR

$(this).parent().parent().next().find('.txt', ':enabled')[0].focus();

HTML示例：

<tr>
    <td>8:15-8:30</td>
    <td id="0_select_ 8:15" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="0_selectbox_ 8:15" type="text" />
    </td>
    <td id="1_select_ 8:15" style="cursor: pointer;" runat="server">
      <input disabled="true" class="txt-none" id="1_selectbox_ 8:15" type="text" />
    </td>
    <td id="2_select_ 8:15" style="cursor: pointer;" runat="server">
      <input disabled="true" class="txt-none" id="2_selectbox_ 8:15" type="text" />
    </td>
    <td id="3_select_ 8:15" style="cursor: pointer;" runat="server">
      <input disabled="true" class="txt-none" id="3_selectbox_ 8:15" type="text" />
    </td>
    <td id="4_select_ 8:15" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="4_selectbox_ 8:15" type="text" />
    </td>
    <td id="5_select_ 8:15" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="5_selectbox_ 8:15" type="text" />
    </td>
    <td id="6_select_ 8:15" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="6_selectbox_ 8:15" type="text" />
    </td>
  </tr>
  <tr>
    <td>9:00-9:15</td>
    <td id="0_select_ 9:00" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="0_selectbox_ 9:00" type="text" />
    </td>
    <td id="1_select_ 9:00" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="1_selectbox_ 9:00" type="text" />
    </td>
    <td id="2_select_ 9:00" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="2_selectbox_ 9:00" type="text" />
    </td>
    <td id="3_select_ 9:00" style="cursor: pointer;" runat="server">
      <input disabled="true" class="txt-none" id="3_selectbox_ 9:00" type="text" />
    </td>
    <td id="4_select_ 9:00" style="cursor: pointer;" runat="server">
      <input disabled="true" class="txt-none" id="4_selectbox_ 9:00" type="text" />
    </td>
    <td id="5_select_ 9:00" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="5_selectbox_ 9:00" type="text" />
    </td>
    <td id="6_select_ 9:00" style="cursor: pointer; background-color: rgb(235, 151, 78);" runat="server">
      <input class="txt" id="6_selectbox_ 9:00" type="text" />
    </td>
  </tr>

Answer 1

我的理解是您要向下移动一列，当该列中的输入用尽时，从下一列的顶部开始，然后再次进行操作。如果这是正确的：

...不幸的是，jQuery不能很好地进行基于列的搜索。您需要以列为基础对行和列进行更智能的迭代：

试试这个：http://jsfiddle.net/TrueBlueAussie/fJn29/1/

        var $this = $(this);
        var $td = $this.closest('td'); // Current TD
        var $row = $td.closest('tr'); // Current TR
        var $rows = $row.parent(); // Current TABLE or TBODY - parent of all rows
        var column = $td.index(); // Current column of TD

        // Search on a row basis in current column, then try next column
        // repeat until we run out of cells
        while ($td.length) {
            // get next row
            $row = $row.next('tr');
            // If we were on last row
            if ($row.length == 0) {
                // Go back to first row
                $row = $rows.children().first();
                // And use next column
                column++;
            }
            // get the position in the row column - if it exists
            $td = $row.children().eq(column);
            var $input = $td.find('.txt');
            if ($input.length) {
                $input.focus();
                break;
            }
        }

如果您愿意，可以通过重新选择第一列（如果您跑过最后一列）来使其环绕：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/fJn29/2/

            if (column >= $row.children().length)
            {
                column = 1;
            }
            // get the position in the row column - if it exists
            $td = $row.children().eq(column);