如何使用jQuery在表格中将标签顺序从水平方向重新分配为垂直方向? [英] How can I use jQuery to reassign the tab-order from horizontal to vertical in a table?

问题描述

如何使用jQuery设置带有输入元素的表的制表顺序，以使制表顺序是垂直的(每列下方)，而不是默认的水平方法?

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

示例表(不幸的是呈现为图片)

图片1.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

因此，通过制表键，您首先要遍历所有的，然后遍历所有的以此类推，依此类推.

示例: http://jsfiddle.net/grc4/G5F7S/3/

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

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

How can I use jQuery to set up the tabbing order of a table with input elements so that the tab-order will be vertical (down each of the columns) instead of the default horizontal method?

The numbers below represent the tabbing order I would like. I'd the jQuery code to work independently of the number of rows and columns in the table.

Example Table (rendered as an image unfortunately)

Picture 1.png http://img263.imageshack.us/img263/9125/picture1pjf.png

Example table HTML Code:

<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>

解决方案

Here's one way to do it:

$(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
    });
});

What this achieves is something like this:

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

So that by tabbing, you first go through all the ones, then all the twos, and so on.

Example: http://jsfiddle.net/grc4/G5F7S/3/

EDIT:

To avoid the problem when there are other input fields, you can simply add an offset to each tabindex. This won't always get the order perfect, but it's better than nothing.

The updated example is here: http://jsfiddle.net/grc4/G5F7S/6/

这篇关于如何使用jQuery在表格中将标签顺序从水平方向重新分配为垂直方向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！