Question

I have a page that is currently generating dynamically created textboxes in a table format. The users are requesting that the tab order be changed from horizontal-vertical to vertical-horizontal. I know that you can use the tabindex attribute to control the tab ordering, but I can’t for the life of me figure out the right way to get the sequential number properly for the textboxes. I guess this is more of a math question than anything else!

FYI, the textboxes are made while looping two different collections. First collection looped to make the rows, for each row, second collection (which is a property of the first collection objects) is looped to create the columns.

Any help would be greatly appreciated. Thanks!

Answer 1

You will need three variables to get this to work:

• Total number of rows
• Current row index
• Current column index

You can then achieve the vertical tab order by setting the tabindex to:

totalRowCount * currentColumnIndex + currentRowIndex + 1

For a five-row, three-column table the above calculation would render the tab order as:

1   5   10
2   6   11
3   7   12
4   8   13 
5   9   14

Updated: Wil, thanks for pointing that out. I’ve updated the example. I also checked the W3C spec (which I probably should have done first) which clarifies the behavior:

elements that do not support the
tabindex attribute or support it and
assign it a value of “0” are navigated
next. These elements are navigated in
the order they appear in the character
stream.