Hide/Unhide Table elements

[sogc]

I am trying to hide/unhide some table elements. Namely, if the value in a Select element is true, then show the table element and based on the value of the select element, unhide "x" number of table cells that were originally hidden.

My current problem is that the table is visible before I affect any value for the Select element.

I am supplying the source code for the relevant section of my page. As well, I am attaching what the output looks like. It's the cells that say, "Payment No. 1, Payment No. 2" etc. that should be hidden at first.

	<tr>
		<td id="featuretabletd">Payment Type</td>
		<td id="featuretabletd">
		<select name="paymenttype" onChange="javascript:toggle(this);">
		<option value="">Select a payment type</option>

		
		<option value="CA">Cash</option>
		
		<option value="CQ">Cheque</option>
		
		</select>
		<span id="chequenumber">&nbsp;Cheque Number &nbsp;<input name="chequenum" type="text" value=""></span>
		</td>
	</tr>
	<tr>

		<td id="featuretabletd">Payment Schedule</td>
		<td id="featuretabletd">
		<select name="paymentschedule" onChange="javascript:toggle2(this);">
		<option value="default">Select a payment schedule</option>
		
		<option value="001">Quarterly</option>
		
		</select>
		</td>

	</tr>
	<tr>
		<!-- Payment Schedule Table -->
		<table cellpadding="0px" cellspacing="0px" border="1px" id="pmtsched">
		  
		<tr><td id="column1">Payment No. 1</td><td id="column1">test1</td></tr>
		  
		<tr><td id="column2">Payment No. 2</td><td id="column2">test2</td></tr>
		  
		<tr><td id="column3">Payment No. 3</td><td id="column3">test3</td></tr>

		  
		<tr><td id="column4">Payment No. 4</td><td id="column4">test4</td></tr>
		  
		<tr><td id="column5">Payment No. 5</td><td id="column5">test5</td></tr>
		  
		<tr><td id="column6">Payment No. 6</td><td id="column6">test6</td></tr>
		  
		<tr><td id="column7">Payment No. 7</td><td id="column7">test7</td></tr>
		  
		<tr><td id="column8">Payment No. 8</td><td id="column8">test8</td></tr>

		  
		<tr><td id="column9">Payment No. 9</td><td id="column9">test9</td></tr>
		  
		<tr><td id="column10">Payment No. 10</td><td id="column10">test10</td></tr>
		  
		<tr><td id="column11">Payment No. 11</td><td id="column11">test11</td></tr>
		  
		<tr><td id="column12">Payment No. 12</td><td id="column12">test12</td></tr>
		  
		<tr><td id="column13">Payment No. 13</td><td id="column13">test13</td></tr>

		  
		<tr><td id="column14">Payment No. 14</td><td id="column14">test14</td></tr>
		  
		<tr><td id="column15">Payment No. 15</td><td id="column15">test15</td></tr>
		  
		<tr><td id="column16">Payment No. 16</td><td id="column16">test16</td></tr>
		  
		<tr><td id="column17">Payment No. 17</td><td id="column17">test17</td></tr>
		  
		<tr><td id="column18">Payment No. 18</td><td id="column18">test18</td></tr>

		  
		<tr><td id="column19">Payment No. 19</td><td id="column19">test19</td></tr>
		  
		<tr><td id="column20">Payment No. 20</td><td id="column20">test20</td></tr>
		  
		<tr><td id="column21">Payment No. 21</td><td id="column21">test21</td></tr>
		  
		<tr><td id="column22">Payment No. 22</td><td id="column22">test22</td></tr>
		  
		<tr><td id="column23">Payment No. 23</td><td id="column23">test23</td></tr>

		  
		<tr><td id="column24">Payment No. 24</td><td id="column24">test24</td></tr>
		
		</table>
	</tr>
	<tr>
	<td id="featuretabletd">&nbsp;</td><td id="featuretabletd"><input name="submit" type="submit" value="Post"></td>
	</tr>
	</table>
	</form>

	</div>
	
</div>
</div>
</div>

<script type="text/javascript"> // Used to hide/unhide Cheque Number cell

var chequenumbervar = document.getElementById('chequenumber');
chequenumbervar.style.visibility = 'hidden';                

function toggle(switchElement) 
{
	if (switchElement.value == 'CQ')
			chequenumbervar.style.visibility = 'visible';
	else
			chequenumbervar.style.visibility = 'hidden';                
}
</script>

<script type="text/javascript"> // Used to hide/unhide Payment Schedule Table
// Initially hides the table element called pmtsched
var pmtschedvar = document.getElementById('pmtsched');
pmtschedvar.style.visibility = 'hidden';                

// Initially hides all table cells with "column" in the id value
  
var columnvar1 = document.getElementById('column1');
columnvar1.style.visibility = 'hidden';                
  
var columnvar2 = document.getElementById('column2');
columnvar2.style.visibility = 'hidden';                
  
var columnvar3 = document.getElementById('column3');
columnvar3.style.visibility = 'hidden';                
  
var columnvar4 = document.getElementById('column4');
columnvar4.style.visibility = 'hidden';                
  
var columnvar5 = document.getElementById('column5');
columnvar5.style.visibility = 'hidden';                
  
var columnvar6 = document.getElementById('column6');
columnvar6.style.visibility = 'hidden';                
  
var columnvar7 = document.getElementById('column7');
columnvar7.style.visibility = 'hidden';                
  
var columnvar8 = document.getElementById('column8');
columnvar8.style.visibility = 'hidden';                
  
var columnvar9 = document.getElementById('column9');
columnvar9.style.visibility = 'hidden';                
  
var columnvar10 = document.getElementById('column10');
columnvar10.style.visibility = 'hidden';                
  
var columnvar11 = document.getElementById('column11');
columnvar11.style.visibility = 'hidden';                
  
var columnvar12 = document.getElementById('column12');
columnvar12.style.visibility = 'hidden';                
  
var columnvar13 = document.getElementById('column13');
columnvar13.style.visibility = 'hidden';                
  
var columnvar14 = document.getElementById('column14');
columnvar14.style.visibility = 'hidden';                
  
var columnvar15 = document.getElementById('column15');
columnvar15.style.visibility = 'hidden';                
  
var columnvar16 = document.getElementById('column16');
columnvar16.style.visibility = 'hidden';                
  
var columnvar17 = document.getElementById('column17');
columnvar17.style.visibility = 'hidden';                
  
var columnvar18 = document.getElementById('column18');
columnvar18.style.visibility = 'hidden';                
  
var columnvar19 = document.getElementById('column19');
columnvar19.style.visibility = 'hidden';                
  
var columnvar20 = document.getElementById('column20');
columnvar20.style.visibility = 'hidden';                
  
var columnvar21 = document.getElementById('column21');
columnvar21.style.visibility = 'hidden';                
  
var columnvar22 = document.getElementById('column22');
columnvar22.style.visibility = 'hidden';                
  
var columnvar23 = document.getElementById('column23');
columnvar23.style.visibility = 'hidden';                
  
var columnvar24 = document.getElementById('column24');
columnvar24.style.visibility = 'hidden';                


function toggle2(switchElement2) // Unhides table cells
{
	if (switchElement2.value != 'default')
			{
			pmtschedvar.style.visibility = 'visible';
			var i;
			for (i=1;i<=switchElement2.value;i++)
				{
				column+i.style.visibility = 'visible';
				}
			}
	else
			{pmtschedvar.style.visibility = 'hidden';}
}

</script> </div><!-- start tag found in header.cfm -->
</body>
</html>

 

[dkm666]

Rather than setting the style.visibility property on each of your table cells, I would recommend that you consider a technique called "CSS switching". Initially, you declare things to be hidden as "class='hid'", where the CSS contains a line like this:

.hid {display:none}

Then when you want to make an item visible, your Javascript merely needs to change the class of the object:

obj.className = ''

If this is not general enough, you may know that an object can be assigned to more than one class; then, in order to remove the hidden property, you would have to remove the class 'hid' from the className string. (I used split and join for this purpose.)