If you want to collapse some rows in you HTML table you can use the following script in your HTML document!


<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
var tblRows = tbl.rows;
for (i = 0; i < tblRows.length; i++) {
if (tblRows[i].className != "odd") {
tblRows[i].style.display = (rowVisible) ? "none" : "";
}
}
rowVisible = !rowVisible;
}
</script>

and here is a button for activating script:

<input type="button" value="Hide Details" onclick="toggleDisplay(document.getElementById('TheTable'))" />

Now each time you press the button all odd rows will collapse . Note that you have to set your table id to “TheTable” & also set classes of odd rows to “odd”.

Here is an example: