Menú Cerrar

Codigo de Ejemplo para Ocultar campos con ☕ JavaScript

JS HTML CSS

 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.


Te invitamos a visitar nuestros canales en y Suscribirte



Suscríbete por correo electrónico

Recibe notificaciones de Spek Regg

Únete a otros 32 suscriptores


Publicado en Soporte Tecnico

Te puede interesar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *