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