可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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>
回答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/
回答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>
