IE Javascript Clicking Problem

Answer 1

Have you tried changing this line

tblRows[i].style.display = (rowVisible) ? "none" : "";

to something like

tblRows[i].style.display = (rowVisible) ? "none" : "table-row";

or

tblRows[i].style.display = (rowVisible) ? "none" : "auto";

Answer 2

You might want to place your onclick call on the actual <tr> tag rather than the individual <th> tags. This way you have less JS in your HTML which will make it more maintainable.

Answer 3

If you enable script debugging in IE (Tools->Internet Options->Advanced) and put a 'debugger;' statement in the code, IE will automatically bring up Visual Studio when it hits the debugger statement.

Answer 4

I have had issues with this in IE. If I remember correctly, I needed to put an initial value for the "display" style, directly on the HTML as it was initially generated. For example:

<table>
  <tr style="display:none"> ... </tr>
  <tr style="display:"> ... </tr>
</table>

Then I could use JavaScript to change the style, the way you're doing it.

Answer 5

setAttribute is unreliable in IE. It treats attribute access and object property access as the same thing, so because the DOM property for the 'class' attribute is called 'className', you would have to use that instead on IE.

This bug is fixed in the new IE8 beta, but it is easier simply to use the DOM Level 1 HTML property directly:

img.src= CLOSED_IMAGE;
tbl.className= OPEN_TBL;

You can also do the table folding in the stylesheet, which will be faster and will save you the bother of having to loop over the table rows in script:

table.closed tr { display: none; }

Answer 6

I always use style.display = "block" and style.display = "none"