CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8
bumbumpaw
bumbumpaw

Reputation: 2528

setting tabIndex for table row not working in IE8

This is my sample table format :

This is my code for dynamically setting tabIndex for <tr>(perfectly working in Chrome and FF but not on IE 8) : 

<html>
    <head>
        <script src="jquery-1.10.2.js"></script>
        <style>
            td {
                color: blue;
            }
            :focus {
                color: red;
            }
        </style>
        <script>
            $(document).ready(function() {
                $("tr").attr( "tabIndex", function ( i ) {
                    return i + 1;
                });
            });
        </script>
    </head>
    <body>
        <table>
            <thead></thead>
            <tbody>
                <tr><td>Five</td></tr>
                <tr><td>Four</td></tr>
                <tr><td>Three</td></tr>
                <tr><td>Two</td></tr>
                <tr><td>One</td></tr>
            </tbody>
        </table>
    </body>
</html>

Can anyone help how to fix setting tabIndex on table row that works all on browers,especially on IE8?

Upvotes: 3

Views: 2615

Answers (1)

Sampson
Sampson

Reputation: 268374

In HTML 4.01, the tabIndex attribute was limited to a smaller set of focusable elements that did not include table rows. I suspected this may have been the case for the issue you're facing, but after standing up a single test on JSFiddle, I found that IE 8 was actually handling the code appropriately.

Here's a quick demo I stood up to test the issue:

<table>
    <tr><td>Five</td></tr>
    <tr><td>Four</td></tr>
    <tr><td>Three</td></tr>
    <tr><td>Two</td></tr>
    <tr><td>One</td></tr>
</table>

:focus {
    background: yellow;
}

$("tr").attr( "tabIndex", function ( i ) {
    return 5 - i;
});

And as you can see in the following GIF, IE 8 worked as expected.

enter image description here

So what could the issue be? Check your version of jQuery; jQuery 2.x versions don't support Internet Explorer 8. If you'd like to support a browser half-a-decade old, you'll need to use jQuery 1.x versions.

Upvotes: 2

Related Questions