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) :

  • window.onload() is not firing with IE 8 in first shot
  • Nth-of-type alternative for IE8
  • what is the alternate function for indexOf for string in IE8?
  • Why does this HTML crash IE?
  • IE8: parseInt('07') vs parseInt('08')
  • IE8 Rendering Bug: after javascript visibility-toggle, div content stays white
  • <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?

  • Javascript: Treating string as array works locally but not deployed in IE
  • document.referrer.indexOf() breaking in IE8
  • Embed VLC Player 1.1.7 in page for IE
  • CSS/JS Clock: Strange positioning behaviour in IE8
  • Console undefined issue in IE8
  • IE8: Object Doesn't Support This Property or Method (Date function)
  • One Solution collect form web for “setting tabIndex for table row not working in IE8”

    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.