Accediendo a través de DOM a las filas podemos hacer que éstas se muestren u oculten. Lo único que deberemos tener en cuenta es que así como en Internet Explorer funciona display = "block" para volver a mostrar la fila, en Firefox deberemos utilizar display = "table-row".
A continuación se muestra un pequeño ejemplo de uso. Un formulario en el que hay campos opcionales y otros que son obligatorios. Podemos disponer de un botón para ocultar los campos que son opcionales y facilitar el trabajo al usuario. Logicamente, esta opción adquiere verdadera utilidad en formularios de gran tamaño.
HTML:
<html>
<head>
<script type="text/javascript">
function MostrarFilas(Fila) {
var elementos = document.getElementsByName(Fila);
for (i = 0; i< elementos.length; i++) {
if(navigator.appName.indexOf("Microsoft") > -1){
var visible = 'block'
} else {
var visible = 'table-row';
}
elementos[i].style.display = visible;
}
}
function OcultarFilas(Fila) {
var elementos = document.getElementsByName(Fila);
for (k = 0; k< elementos.length; k++) {
elementos[k].style.display = "none";
}
}
</script>
</head>
<body >
<form id="form1" name="form1" method="post" action="">
<table width="90%" border="0" cellspacing="0" cellpadding="5">
<tr>
Los campos marcados con un asterisco son obligatorios </td>
</tr><tr>
<td width="26%">(*) Nombre:</td>
<td width="74%"><input name="Nombre" type="text" /></td>
</tr>
<tr name="Op" id="Op">
<td>Apellidos:</td>
<td><input name="Apellidos" type="text" /></td>
</tr>
<tr>
<td>(*) E-mail:</td>
<td><input name="E-mail" type="text"/></td>
</tr>
<tr name="Op" id="Op">
<td>Tel茅fono:</td>
<td></td>
</tr>
</table>
<p><a href="javascript:OcultarFilas('Op')">Ocultar Opcionales</a> </p>
<p><a href="javascript:MostrarFilas('Op')">Mostrar Opcionales</a> </p>
</form>
</body>
</html>
