Control Tabla - Oculta y muestra filas de una tabla.

<Librerías JavaScript>

Esta librería JavaScript nos permite ocultar filas en una tabla. El método se produce bajo la selección de la fila mediante un cuadro de selección, el cual contiene todas las filas de la tabla. El Script también nos permite volver a mostrar la fila en su posición original.

| Descripción de la Librería JavaScript

Snapshots de la librería (vista previa).

Eliminar Fila de una Tabla

Información relativa a la Librería JavaScript

Compatible con: Internet Explorer

Tamaño de la Librería: 5KB

Probar la Librería

Descargar Librería Completa

Temas relacionados a esta Librería JavaScript

Librería JavaScript para ocultar filas en una tabla.

Código fuente del archivo JS (controltabla.js)

function borrarFila() {
filasMostradas = 0
filasNoMostradas = 0

// Almacenamos el valor de la opción seleccionada
borrarNumero = document.form.Fila.options[document.form.Fila.selectedIndex].value
fila = varTabla.getElementsByTagName('TR');

// Si la fila tiene como valor de display una cadena de texto diferente a 'none'
if (fila[borrarNumero].style.display != "none") {
	// Ocultamos la fila
	fila[borrarNumero].style.display = "none";
}
// De otra manera
else {
	// Mostramos la fila
	fila[borrarNumero].style.display = "";
}

/* Utilizamos este bucle para contabilizar la cantidad 
de filas mostradas y ocultas en la tabla */
for (n = 1; n <= filasLength; n++) {
	// Si la fila está presente
	if (varTabla.getElementsByTagName('TR')[n].style.display == "") {
		// Sumamos 1 a las filas mostradas
		filasMostradas++
	}
	// Si la fila está oculta
	if (varTabla.getElementsByTagName('TR')[n].style.display == "none") {
		// Sumamos 1 a las filas NO mostradas
		filasNoMostradas++
	}
}

iniciar() // Ejecutamos la función

} // Fin de la función borrarFila()

function mostrar() {
// Creamos ete bucle para mostrar cada una de las filas
for (i = 0; i <= filasLength; i++) {
	varTabla.getElementsByTagName('TR')[i].style.display = ""
}
	filasMostradas = filasLength
	filasNoMostradas = 0
	iniciar()
} // Fin de la función mostrar()

function ocultar() {
// Creamos ete bucle para ocultar cada una de las filas
for (i = 1; i <= filasLength; i++) {
	varTabla.getElementsByTagName('TR')[i].style.display = "none"
}
	filasMostradas = 0
	filasNoMostradas = filasLength
	iniciar()
} // Fin de la función ocultar()

Código fuente del archivo JS (controltabla2.js)

varTabla = document.getElementById('tabla')
varBoton = document.form.boton

// Creamos un elemento SELECT
newSelect = document.createElement("SELECT");
// Asignamos el valor del atributo id
newSelect.id = "Fila";
// Mostramos el elemneto SELECT creado
form.appendChild(newSelect);

// Almacenamos la cantidad de filas totales que tiene la tabla
filasLength = varTabla.getElementsByTagName('TR').length;
// Almacenamos la cantidad de filas menos 1
filasMostradas = filasLength - 1
filasNoMostradas = 0

/* Creamos este buble para escribir los valores del cuadro SELECT
según la cantidad de filas de la tabla */
for (m = 0; m < filasLength; m++) {
	// Creamos un elemento OPTION
	newOption = document.createElement("OPTION");
	// Para la primera opción
	if (m == 0) {
		// Definimos el valor de id
		newOption.id = "numeroFila" + m;
		// Definimos el valor de value
		newOption.value = m;
		// Mostramos la opción creada
		newSelect.appendChild(newOption);
		// Escribimos el texto de la opción
		newOption.innerHTML = 'selecciona';
}
	// Para cualquier otra fila se ejecuta
	else {
		newOption.id = "numeroFila" + m;
		newOption.value = m;
		newSelect.appendChild(newOption);
		newOption.innerHTML = m;
	}
}

/* Ejecutamos la función cada vez que cambia 
el valor del cuadro de selección */
document.form.Fila.onchange = iniciar

function iniciar() {

// Si la fila está oculta
if (varTabla.getElementsByTagName('TR')[document.form.Fila.selectedIndex].style.display == "none") {
	// Definimos el texto del botón
	varBoton.value = 'Mostrar Fila ID'
}
else {
	varBoton.value = 'Ocultar Fila ID'
}

// Si se selecciona la primera opción
if (document.form.Fila.selectedIndex == 0) {
	// Desactivamos el botón
	varBoton.disabled = true
	varBoton.value = 'Selecciona'
}
else {
	varBoton.disabled = false
}

// Almacenamos la cantidad de filas menos 1
filasLength = varTabla.getElementsByTagName('TR').length - 1;

// Escribimos un resumen de la tabla
document.getElementById('resumen').innerHTML = "<b>Cantidad de Filas Totales:</b> " + filasLength + 
'<br><b>Filas Mostradas:</b> ' + filasMostradas + 
'<br><b>Filas Ocultas:</b> ' + filasNoMostradas;
}

Código fuente de la Librería (archivo HTML):

</HEAD>

<TABLE id="tabla" border="1">
	<TR id="cabecera">
		<TD>ID</TD>
		<TD>Producto</TD>
		<TD>Precio</TD>
		<TD>Stock</TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>Producto 1</TD>
		<TD>12 pesos</TD>
		<TD>10 unidades</TD>
	</TR>
	<TR>
		<TD>2</TD>
		<TD>Producto 2</TD>
		<TD>10 pesos</TD>
		<TD>5 unidades</TD>
	</TR>
	<TR>
		<TD>3</TD>
		<TD>Producto 3</TD>
		<TD>40 pesos</TD>
		<TD>1 unidades</TD>
	</TR>
</TABLE>

<FIELDSET><LEGEND>Resumen</LEGEND>
<DIV id="resumen"></DIV>
<DIV><a href="javascript:mostrar()">Mostrar Todas las filas</a></DIV>
<DIV><a href="javascript:ocultar()">Ocultar Todas las filas</a></DIV>
</FIELDSET>

</BODY>
</HTML>

	Temas relacionados a la Librería JavaScript:
	Ningún tema relacionado.

Comentarios Recibidos sobre: Control Tabla - Oculta y muestra filas de una tabla

ADMIN | Enviado: Abril 18, 2008

Roberto de Colombia | Enviado: Abril 18, 2008

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.