El ‘truco’ está en identificar las filas que se quieren ocultar y usar unas funciones en javascript para acceder a las propiedades de esos objetos para modificar su visibilidad.
<html> <head> <title>REGGNETWORK</title> <script type="text/javascript"> function MostrarFilas(Fila) { // Almacenamos en "elementos" el objeto "Fila" recibido como parámetro var elementos = document.getElementsByName(Fila); // Mostramos todos los objetos del mismo identificador // Con propiedad display = "" dejamos al navegador que ponga su tipo por defecto for (i = 0; i < elementos.length; i++) elementos[i].style.display =""; } function OcultarFilas(Fila) { // Almacenamos en "elementos" el objeto "Fila" recibido como parámetro var elementos = document.getElementsByName(Fila); // Ocultamos todos los objetos del mismo identificador for (k = 0; k < elementos.length; k++) elementos[k].style.display = "none"; } </script> </head> <body > <form name="formulario" method="post" action=""> <table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2"><font color="Red">Los campos marcados con un asterisco son obligatorios</font></td> </tr> <tr> <td><font color="Red">(*) Nombre:</font></td> <td><input name="Nombre" type="text"></td> </tr> <tr name="DatosOpcionales" id="DatosOpcionales" style="display:none"> <td><i>Apellidos:</i></td> <td><input name="Apellidos" type="text"></td> </tr> <tr> <td><font color="Red">(*) E-mail:</font></td> <td><input name="E-mail" type="text"></td> </tr> <tr name="DatosOpcionales" id="DatosOpcionales" style="display:none"> <td><i>Telefono:</i></td> <td><input name="Telefono" type="text"></td> </tr> </table> <br> <br> <a href="javascript:MostrarFilas('DatosOpcionales')">Mostrar Datos Opcionales</a> <br> <a href="javascript:OcultarFilas('DatosOpcionales')">Ocultar Datos Opcionales</a> </form> </body> </html>
Para probar create un archivo .html con bloc de notas y pega el codigo y abre con tu navegador.