Hide/Unhide an HTML table in JavaScript

[sehudson]

Inside of one of my jsp pages I have an html table:

<table>
  <tr>
     <td>Col1Data</td>
     <td>Col2Data</td>
     <td>Col3Data</td>
  </tr>
</table>

is there some sort of attribute (id?) that I can put on table that makes it initally "hidden"(collapsed), and then I would call a javascript piece that would "unhide" the table?

[Petr]

Yes sure. Every html tag has attitude id and you can use style properties for you aim. I mean you can call java script then settle display:none/inline in needs tag.

[swapnalimore]

Javascript I want to hide the space occupied by the row in tabls based on value sele
<script language="JavaScript" type="text/javascript">
<!-- show hide Working/Surrendered Date
function ShowTB(obj,id1,id2,id3,id4,id5,id6,id7,id8,id9,id1 0,id11)
{
txt=obj.options[obj.selectedIndex].text;
if (txt.match('No'))
{
document.getElementById(id1).style.visibility='hid den';
document.getElementById(id2).style.visibility='hid den';
document.getElementById(id3).style.visibility='hid den';
document.getElementById(id4).style.visibility='hid den';
document.getElementById(id5).style.visibility='hid den';
document.getElementById(id6).style.visibility='hid den';
document.getElementById(id7).style.visibility='hid den';
document.getElementById(id8).style.visibility='hid den';
document.getElementById(id9).style.visibility='hid den';
document.getElementById(id10).style.visibility='vi sible';
document.getElementById(id11).style.visibility='vi sible';
}


if (txt.match('Yes'))
{
document.getElementById(id1).style.visibility='vis ible';
document.getElementById(id2).style.visibility='vis ible';
document.getElementById(id3).style.visibility='vis ible';
document.getElementById(id4).style.visibility='vis ible';
document.getElementById(id5).style.visibility='vis ible';
document.getElementById(id6).style.visibility='vis ible';
document.getElementById(id7).style.visibility='vis ible';
document.getElementById(id8).style.visibility='vis ible';
document.getElementById(id9).style.visibility='vis ible';
document.getElementById(id10).style.visibility='hi dden';
document.getElementById(id11).style.visibility='hi dden';
}
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!-- show hide Working/Surrendered Date
function Show(obj,id1,id2,id3)
{
txt=obj.options[obj.selectedIndex].text;
if (txt.match('Yes'))
{
document.getElementById(id1).style.visibility='hid den';
document.getElementById(id2).style.visibility='hid den';
document.getElementById(id3).style.visibility='hid den';
}


if (txt.match('No'))
{
document.getElementById(id1).style.visibility='vis ible';
document.getElementById(id2).style.visibility='vis ible';
document.getElementById(id3).style.visibility='vis ible';
}
}
//-->
</script><tr>
<td colspan="5" bgcolor="#990000" align="center" ><font color="white"></font><B>Network Equipments Availability</B></td> </tr>

<tr align="center" >
<th colspan="2.5"><Font color="Red">*</Font><b>Is there a router available at the site :</b></th>
<th colspan="2.5">
<select name="router" onchange="ShowTB(this,'fred1','fred2','fred3','fre d4','fred5','fred6','fred7','fred8','fred9','fred1 0','fred11');">
<option value="-1">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</th>
</tr>
<tr>
<th id="fred1" colspan="5" bgcolor="#990000" style="visibility:hidden;" align="center" ><font color="white"></font><B>Give the following Details</B></th> </tr>

<tr>

<th id="fred2" align="left" bgcolor="#FFCC99" style="visibility:hidden;" ><Font color="Red">*</Font><b>Mark</b></th>
<td>
<input id="fred3" style="visibility:hidden;" type="text" name="mark" size="30" ></td>

<th id="fred4" align="left" bgcolor="#FFCC99" style="visibility:hidden;" ><Font color="Red">*</Font><b>Model</b></th>
<td>

<input id="fred5" style="visibility:hidden;" type="text" name="model" size="30" ></td>
</tr>

<tr>
<th id="fred6" align="left" bgcolor="#FFCC99" style="visibility:hidden;" ><Font color="Red">*</Font><b>Sr no</b></th>
<td>
<input id="fred7" style="visibility:hidden;" type="text" name="sr no" size="30" ></td>



<th id="fred8" align="left" bgcolor="#FFCC99" style="visibility:hidden;" ><Font color="Red">*</Font><b>Accesories/Card</b></th>
<td>
<input id="fred9" style="visibility:hidden;" type="text" name="card" size="30" ></td>

</tr>



<tr align="center" >
<th id="fred10" align="center" colspan="2.5" bgcolor="#FFCC99" style="visibility:hidden;" ><Font color="Red">*</Font><b>Does a new Router is required to be processed:</b></th>
<td id="fred11" colspan="2.5" align="left" bgcolor="#FFCC99" style="visibility:hidden;" >
<select name="info" onchange="Show(this,'fred12','fred13');" >
<option value="-1">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>

<tr align="center" >
<th id="fred12" align="center" bgcolor="#FFCC99" colspan="2.5" style="visibility:hidden;" ><Font color="Red">*</Font><b>Is the Router made available from existing stock:</b></th>
<td id="fred13" align="left" bgcolor="#FFCC99" style="visibility:hidden;"colspan="2.5" >
<select name="stock" >
<option value="-1">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>

[Eranga]

Wonder that OP still interest on this.