toggle table rows

[hlamster]

I am trying to toggle rows in a table based on the selection of a radio button. The functions is as follows:

<script language='javascript' type='text/javascript'>
function showHideRows(clsName, hideshow)
{
  var table = document.getElementById('fullTable');
  var rows = table.getElementsByTagName('tr');    
  for(var i=0;i<rows.length;i++)
  {
    if(rows[i].className != clsName) continue;
    if(hideshow='hide')
    {
       rows[i].style.display = 'none';
    }
    else
    {
       rows[i].style.display = 'table-cell';
    }
  }
}
</script>

In the table I have the following radop button set:

<tr><td colspan='2'>Will your dance group have a float or vehicle? ";
Yes:<input name='pc_parade_float' type='radio' id='pc_parade_float' value='1' onChange=showHideRows('vehreg','show') />
No:<input name='pc_parade_float' type='radio' id='pc_parade_float' value='0' onChange=showHideRows('vehreg','hide') checked />
<tr class='vehreg'><td colspan='2' class='vehreg'><strong>Vehicle Registration (deadline April 30, 2013)</strong></td></tr>
<tr class='vehreg'><td colspan='2'> - Many groups bring decorated vehicles into the parade...</td></tr>
etc.

I also have the tr.vehreg = 'none' set in the body so it should start out hidden and when yes is clicked it should display the additional rows. I have tried the reverse.... where the rows are initially shown and then hidden when I click on no and that works - but this way doesn't. It is driving me nuts. I am not much of a javascript developer but this seems like it should be trivial. What am I missing?

Thanks/Hal

[Airshow]

Hal,

Try this:

function showHideRows(clsName, hideshow)
{
  var table = document.getElementById('fullTable');
  var rows = table.getElementsByTagName('tr');    
  for(var i=0;i<rows.length;i++)
  {
    if(rows[i].className != clsName) continue;
    if(hideshow == 'hide')//note: double ==
    {
       rows[i].style.display = 'none';
    }
    else
    {
       rows[i].style.display = 'table-row';//note: table-row
    }
  }
}

DEMO

or this shorter version, which is essentially the same :

function showHideRows(clsName, hideshow) {
    var table = document.getElementById('fullTable');
    var rows = table.getElementsByTagName('tr');    
    for(var i=0;i<rows.length;i++) {
        if(rows[i].className != clsName) continue;
        rows[i].style.display = (hideshow == 'hide') ? 'none' : 'table-row';
    }
}

[hlamster]

I can't believe I missed that. Ugh. But it still doesn't work. I tried your shortened version as well and neither of them display the hiddon rows.

[hlamster]

sorry - had a typo - it is now working. Thanks for all your help.