I am using jQuery's toggle() to show/hide table rows. It works fine in FireFox but does not work in IE 8.
.show()
/.hide()
work fine though.
slideToggle() does not work in IE either - it shows for a split second then disappears again. Works fine in FireFox.
My HTML looks similar to this
<a id="readOnlyRowsToggle">Click</a>
<table>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr class="readOnlyRow"><td>row</td></tr>
<tr class="readOnlyRow"><td>row</td></tr>
<tr class="readOnlyRow"><td>row</td></tr>
</table>
JavaScript
$(document).ready(function() {
$(".readOnlyRow").hide();
$("#readOnlyRowsToggle").click(function() {
$(".readOnlyRow").toggle();
});
});
Tables are an interesting piece of html, they don't follow normal rules as other elements.
basically tables display as tables, there are special rules for tables but this was not dealt with properly in older browsers because of the roller coaster of craziness that was the browser wars.
Essentially in older browsers tables display properties were minimal and the flow was left largely undocumented so instead of altering predefined values for the table/tr/td tag it is best to instead add and remove the following class and simply toggle the class itself on and off on the attribute of the table/tr/td.
The reason for this is so that it is a separate class being used to toggle the display therefore nothing on the table itself is being changed nor do any of the tables properties need to be altered, display and any related layout properties are preserved even if the browser doesn't make that easy behind the scenes.