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>
<td colspan=¨2¨>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><input name=¨Telefono¨ type=¨text¨ /></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>