如何使用 jQuery 将表格中的制表符顺序从水平重新分配为垂直？

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

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

示例表（不幸的是呈现为图像）

图片1.png http://img263.imageshack.us/img263/9125/picture1pjf.png http://img263.imageshack.us/img263/9125/picture1pjf.png

示例表 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
    });
});

这样做的效果是这样的：

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

因此，通过 Tab 键，您首先浏览所有的，然后是所有的，依此类推。

例子：http://jsfiddle.net/grc4/G5F7S/3/ http://jsfiddle.net/grc4/G5F7S/3/

EDIT:

为了避免当有其他输入字段时出现问题，您可以简单地为每个 tabindex 添加一个偏移量。这并不总是能让订单完美，但总比没有好。

更新后的示例在​​这里：http://jsfiddle.net/grc4/G5F7S/6/ http://jsfiddle.net/grc4/G5F7S/6/