Как я могу использовать jQuery для переназначения порядка вкладок от горизонтали до вертикали в таблице?

Как я могу использовать 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>

Ответ 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

Таким образом, путем табуляции вы сначала просматриваете все те, все два и т.д.

Пример: http://jsfiddle.net/grc4/G5F7S/3/

EDIT:

Чтобы избежать проблемы, когда есть другие поля ввода, вы можете просто добавить смещение для каждого tabindex. Это не всегда обеспечит порядок, но это лучше, чем ничего.

Обновленный пример: http://jsfiddle.net/grc4/G5F7S/6/

Ответ 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>