如何使用jQuery将表中的选项卡顺序从水平重新分配到垂直？

如何使用jQuery设置带有输入元素的表的选项卡顺序，以便选项卡顺序是垂直的（向下每列），而不是默认的水平方法

下面的数字代表我想要的标签顺序。我希望jQuery代码能够独立于表中的行数和列数工作

示例表（渲染为图像）

示例表HTML代码：

<table>
 <tr>
  <td><input type="text" /></td> <!-- 1 -->
  <td><input type="text" /></td> <!-- 4 -->
  <td><input type="text" /></td> <!-- 7 --> 
 </tr>
 <tr>
  <td><input type="text" /></td> <!-- 2 -->
  <td><input type="text" /></td> <!-- 5 -->
  <td><input type="text" /></td> <!-- 8 -->
 </tr>
 <tr>
  <td><input type="text" /></td> <!-- 3 -->
  <td><input type="text" /></td> <!-- 6 -->
  <td><input type="text" /></td> <!-- 9 -->
 </tr>
</table>

---

这里有一种方法：

$(function() {

    $('tr').each(function() {
        // For each row

        $(this).find('td').each(function(i) {
            // For each cell in that row (using i as a counter)

            $(this).find('input').attr('tabindex', i+1);
            // Set the tabindex of each input in that cell to the counter

        });
        // Counter gets reset for every row
    });
});

这样做的目的是：

123445

123445

123445

因此，通过tabing，您首先遍历所有的一个，然后遍历所有的两个，以此类推

例如：

编辑：

为了避免在有其他输入字段时出现问题，只需在每个tabindex中添加一个偏移量。这并不总能让订单完美，但总比什么都没有好

---

更新后的示例如下：

如果您有矩形表，逻辑会更简单一些，但这里有一个解决方案可以处理任何情况：

//计算表中所有行的最大列数
var maxRowCount=0；
//将columnCount设置为单元格最多的行的计数
//循环遍历所有行，以防某些行比其他行大
$（'table tr'）。每个（函数（）{
maxRowCount=Math.max（maxRowCount，$（this）.children（'td'）.length）；
});
//为表中的所有单元格编号
var-cellCounter=1；
//在表中循环，先列后行
对于（var columnIndex=0；columnIndex

第1栏
第2栏
第3栏
第4栏
第1行
1

5

第2排
2（非文本输入）

6

9

12

第3排
3

7（多输入）

10（在线评论）

第4排
4

8（禁用输入）

11

13

最后一行的第二个单元格应为6:）您希望它使用jquery还是只使用HTML？@Virendra-在加载表后，我需要使用jquery动态更改表，而不使用任何修改的HTML。@BoltClock-已更新，谢谢。还有一个很好的回答（已删除）-如果HTML代码中有数字，这将是一个聪明的方法；）您是如何生成表的？它是动态的还是静态的？另外，我假设行和列的数量可以更改。@Purmou:Simple:Each

。查找（'td'）

对于一行，返回三个单元格，索引0、1、2。按相同顺序分配的选项卡索引为1、2、3。每一行输入都有相同的tabindex集。所有的

tabindex=“1”

输入首先是从上到下的选项卡，然后是

tabindex=“2”

输入，然后是

tabindex=“3”

输入。同一个tabindex可以毫无问题地分配给多个元素，这种行为在HTML规范中有记录。这可能会起作用。因此，这里您将为同一列中的行分配1,2,3的制表符索引。如果没有其他输入字段，这将起作用。但是，如果在表前面有一个输入字段，比如说

tabindex=“3”

，它将无法正常工作。这里有一把小提琴来解释我的意思+1.（ab）使用HTML规范完成您的投标的好方法：）漂亮而简单的代码。棘手但简单而聪明的解决方案+1这实际上并不符合OP的要求。作为OP，我必须同意@Purmou@Purmou，cwd:从0开始选项卡索引（不起作用），并应用于

td

，而不是

输入

。发现错误，修复并更新帖子。谢谢：）你怎么能修改它，让它垂直循环一张表，然后跳转到另一张表，做同样的事情呢。例如，我有一个包含两行和两个单元格的表（a），每个单元格都有包含表单元素的表（B、C、D、E）。现在光标位于表B的一个文本框中，按tab键，它应该垂直循环所有其他文本框（正如上面所做的），完成后，应该跳转到表C中的第一个控件，依此类推@armen：听起来它可能值得在这里提出自己的问题，因为要求有些不同。如果你想写一篇，我很乐意看一看。如果可以，也可以包括一些HTML示例。