Need cross-browser CSS for hiding/showing rows

[CC Ricers]

I have a table with alternating hidden and permanently visible rows. When the user clicks a link on a permanently visible row, it toggles a hidden row to display and hide, which expands and contracts the table.

This is the javascript I used to make it work in Firefox:


<script type="text/javascript">
<!--
function switchMenu(obj)
{
var el = document.getElementById(obj);
if(el.style.display != "table-row") {
el.style.display = "table-row"; } else {
el.style.display = "none";
}
}
// -->
</script>

// Link to expand the table
<a href="#" onclick="switchMenu('new_row');">Click</a>

// Invisible row
<tr id="new_row" style="display: none;"><td> . . . </td></tr>

This doesn't work in IE 6, however, because I get an error about an invalid argument. I guess "table-row" is not supported by the browser as a CSS argument. How do I get around this problem?