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

Question

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

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

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

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

表格示例代码:

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

Answer 1

有一种方法:

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

通过选项卡，你首先浏览所有的1，然后是所有的2，以此类推

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

编辑:

当有其他输入字段时，为了避免这个问题，您可以简单地为每个表索引添加一个偏移量。这并不总是使顺序完美，但总比没有好。

更新后的示例如下:http://jsfiddle.net/grc4/G5F7S/6/

Answer 2

如果您有矩形表，那么逻辑会更容易一些，但是这里有一个解决方案应该可以处理任何情况:

// Count the max number of columns in all rows of the table
var maxRowCount = 0;
// Set columnCount to the count of the row with the most cells
// Loop through all rows in case some rows are larger than others
$('table tr').each(function() {
  maxRowCount = Math.max(maxRowCount, $(this).children('td').length);
});
// Number all of the cells in the table
var cellCounter = 1;
// Loop through the table, column first instead of row first
for (var columnIndex = 0; columnIndex < maxRowCount; ++columnIndex) {
  // Loop through all the rows for the current column
  $('table tr').each(function() {
    // ...but only look at cells matching the current column
    var cellForCurrentColumn = $(this)
    .children('td')
    .eq(columnIndex)
    .find('input');
    // Some rows could be bigger than others,
    // so cellForCurrentColumn might not exist for shorter rows
    if (cellForCurrentColumn != null) {
      // Set the tab index and then increment the counter
      cellForCurrentColumn.attr('tabindex', cellCounter++);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
      <th></th>
      <th>column 1</th>
      <th>column 2</th>
      <th>column 3</th>
      <th>column 4</th>
  </tr>
  <tr>
    <th>row 1</th>
    <td>1<br/><input type="text"/></td>
    <td>5<br/><input type="text"/></td>
  </tr>
  <tr>
    <th>row 2</th>
    <td>2 (non-text input)<br/><input type="button" value="Push me"/></td>
    <td>6<br/><input type="text"/></td>
    <td>9<br/><input type="text"/></td>
    <td>12<br/><input type="text"/></td>
  </tr>
  <tr>
    <th>row 3</th>
    <td>3<br/><input type="text"/></td>
    <td>7 (multiple inputs)<br/><input type="text"/><input type="text"/></td>
    <td>10 (inline comment)<br/><input type="text"/><!-- inline comment --></td>
  </tr>
  <tr>
    <th>row 4</th>
    <td>4<br/><input type="text"/></td>
    <td>8 (disabled input)<br/><input type="text" placeholder="disabled" disabled/></td>
    <td>11<br/><input type="text"/></td>
    <td>13<br/><input type="text"/></td>
  </tr>
</table>