Setting tabIndex for table row not working in IE8
This is my table table format:
This is my code to dynamically set the tabIndex for <tr>
(works fine in Chrome and FF, but not 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 the tabIndex setting on the table row that works on all browsers, especially IE8?
source to share
In HTML 4.01, the attribute tabIndex
was limited to a smaller set of custom elements that did not include table rows. I suspected this might have been the case for the problem you were facing, but after stepping into one JSFiddle test I found that IE 8 does indeed handle the code appropriately.
Here's a quick demo I got up to check 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 next GIF, IE 8 worked as expected.
So what's the problem? Check jQuery version; JQuery 2.x does not support Internet Explorer 8. If you want to support the browser for half a century, you need to use jQuery 1.x.
source to share