Tecnología

Inicio

Cómo ocultar partes de tablas con JavaScript

Cómo ocultar partes de tablas con JavaScript


funciones de JavaScript permiten añadir funcionalidad interactiva para sus páginas web, como por ejemplo cuando se desea permitir a los usuarios de su sitio para contraer o ocultar partes de las tablas. El método JavaScript "pantalla" le permite mostrar u ocultar datos de la página web. Crear una función de JavaScript que utiliza el método de la "pantalla", y llamar a esta función, según sea necesario para controlar la visualización de los datos tabulares.

Instrucciones

1 Abra el documento de página Web.

2 Escriba la siguiente función JavaScript encima de la etiqueta "</ head>":

<Script>

MostrarOcultar función (id)

{

theElement = document.getElementById(id);

si (theElement.style.display == 'none') {

theElement.style.display = '';

} Else {

theElement.style.display = 'none';

}

falso retorno;

}

</ Script>

3 Escriba una declaración "onclick" dentro de la etiqueta de elemento que va a llamar a la función - por ejemplo, un encabezado de la tabla:

<H1 onclick = "MostrarOcultar ( 'd1');"> Primera División por título </ h1>

<Table>

<Tr> <td> FILA UNO: una celda de la tabla </ td> <td> celda de la tabla de dos </ td> </ tr>

<Tr> <td> FILA DE DOS: una celda de la tabla </ td> <td> celda de la tabla de dos </ td> </ tr>

</ Table>

4 Escribir un "id" en el interior del elemento que desea mostrar y ocultar - por ejemplo, una fila de la tabla:

<H1 onclick = "MostrarOcultar ( 'fila2');"> Tabla título </ h1>

<Table>

<Tr> <td> FILA UNO: una celda de la tabla </ td> <td> celda de la tabla de dos </ td> </ tr>

<Tr id = estilo "fila2" = "display: none"> <td> FILA DE DOS: una celda de la tabla </ td> <td> celda de la tabla de dos </ td> </ tr>

</ Table>

Cuando un usuario hace clic en el encabezado de la tabla, la función "MostrarOcultar" recibe el valor "fila2" y accede al elemento que contiene el id "fila2", en este caso la segunda fila. La pantalla de este elemento está ajustado en "ninguno", causando la fila que se oculta.


Artículos relacionados