How can I use jQuery to reassign the tab-order from horizontal to vertical in a table?

Question

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>

Answer 1

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/

Answer 2

The logic is a bit easier if you have rectangular tables, but here's a solution that should handle any case:

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