Can't set tabIndex more than once in IE8

Question

I've got a large HTML data entry table, implemented as a large matrix of input fields. I'm trying to implement a JavaScript-based feature that dynamically switches between a row-wise and column-wise tab order.

The approach I'm using seems to only work "once" in IE8. That is, once the tab index has been set using JavaScript, any subsequent changes are ignored - and the tab ordering reverts to its default state.

The table inputs have classnames like so:

.row-0 .col-0 | .row-0 .col-1 | .row-0 .col-2 | ...
--------------+---------------+---------------+----
.row-1 .col-0 | .row-1 .col-1 | .row-1 .col-2 | ...

My JavaScript looks like this:

nCols = ...;
nRows = ...;

function setTabOrder(byCol) {
    var max = byCol ? nCols : nRows;
    var selector = byCol ? '.col-' : '.row-';
    var tabIndex = 1;
    for (var i = 0; i < max; i++) {
        $(selector + i).each(function () {
            this.tabIndex = tabIndex++;
            //this.value = this.tabIndex;
        });
    }
}

Actually, it seems I can only tab by column if I invoke setTabOrder(true); when the page loads, i.e.:

$(function () {
    setTabOrder(true);
});

Any ideas why this isn't working as I expect it to?

Answer 1

I would recommend you do this a different way, which is the put an event handler for tab keys on all the entry items and then use that key's event to look for the next item in the row or column, depending on what you want, and then call setFocus() on that input. You can do the opposite for shift+tab if you want.

This avoids your problem and doesn't really answer your question, but it also could eliminate the need for this .col- and .row- naming scheme you have which will probably result in an easier to maintain design.