Change the visibility of all rows in a table with JavaScript

Question

I have a table filled by a repeater, with many of the rows hidden initially. I have an anchor that fires a javascript function to change all the rows in the grid. The function is as follows:

   function ExpandAll() {
        var elem = document.getElementById("repeaterTable");

        var rows = elem.rows;

        for (var i = 1; i < rows.length; i++) {
               rows.item(i).style.visibility = 'visible';
               rows.item(i).style.display = '';
        }
    }

This all works, however this function takes about 12-13 seconds to loop through the ~450 rows in the grid. Obviously I can't have it taking that long. Is there any way to do this quicker? The hidden rows currently have:

    style.visibility = 'hidden';
    style.display = 'none';

(hence why I have to set the display to '')

Edit: This is a collapsible table that has "parent" and "child" rows. All the parent rows are allways visible, and the child rows (roughly 3-15 rows per parent) can be expanded or collapsed based on an image click. I am also providing the anchor which expands all parent rows at once. See the image below for how this is laid out:

Also, this is defined by an ASP.NET repeater to fill the table, and therefore I have no way of "grouping" the child rows together for each parent row. In essence, the table knows no difference between the child and parent rows whatsoever.

Answer 1

Assuming there are only two states "All visible" and "A preselected group visible" then forget about twiddling the individual rows.

Have something such as:

<table class="short" id="repeaterTable">

and

<tr class="longOnly">

Then (in your stylesheet):

table.short tr.longOnly { display: none; }

And when you want to expand:

document.getElementById('repeaterTable').className = '';