Índice
Si tenemos una tabla con muchas filas y columnas es posible que no queramos que se vea entera en la pantalla. Con las funciones que veremos a continuación se pueden mostrar y ocultar tanto filas como columnas.
Para empezar pondremos un id a la tabla para poder actuar sobre ella: <table id="tabla">
La primera función, que muestra/oculta las filas se llama con ocultarFila(num,ver) num indica el número de fila (recordar que la primera es cero) y ver indica que queremos hacer con la fila (true=mostrar, false=ocultar). Esta función es bastante sencilla, lo que hace es buscar todos los elementos tr y darle el estilo apropiado al que nos interesa:
VER EJEMPLO
La otra función es ocultarColumna(num,ver) Los parámetros ya los conoceis. Esta función es un poco más compleja porque hay que recorrer todos los elementos tr y en cada uno de ellos dar el estilo que nos interesa al número que hemos pasado a la función:
VER EJEMPLO
Para terminar pondré el código completo, para los aficionados al copy&paste y también podreis ver el ejemplo en funcionamiento.
VER EJEMPLO
Para empezar pondremos un id a la tabla para poder actuar sobre ella: <table id="tabla">
La primera función, que muestra/oculta las filas se llama con ocultarFila(num,ver) num indica el número de fila (recordar que la primera es cero) y ver indica que queremos hacer con la fila (true=mostrar, false=ocultar). Esta función es bastante sencilla, lo que hace es buscar todos los elementos tr y darle el estilo apropiado al que nos interesa:
VER EJEMPLO
- Código:
function ocultarFila(num,ver) {
dis= ver ? '' : 'none';
tab=document.getElementById('tabla');
tab.getElementsByTagName('tr')[num].style.display=dis;
}
La otra función es ocultarColumna(num,ver) Los parámetros ya los conoceis. Esta función es un poco más compleja porque hay que recorrer todos los elementos tr y en cada uno de ellos dar el estilo que nos interesa al número que hemos pasado a la función:
VER EJEMPLO
- Código:
function ocultarColumna(num,ver) {
dis= ver ? '' : 'none';
fila=document.getElementById('tabla').getElementsByTagName('tr');
for(i=0;i<fila.length;i++)
fila[i].getElementsByTagName('td')[num].style.display=dis;
}
Para terminar pondré el código completo, para los aficionados al copy&paste y también podreis ver el ejemplo en funcionamiento.
VER EJEMPLO
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mostrar/ocultar filas y columnas</title>
<style type="text/css">
table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}
td {border:1px solid maroon;width:30px;text-align:center}
input {background:silver; border:1px solid maroon;width:100px;margin:5px}
</style>
<script type="text/javascript">
<!--
function ocultarFila(num,ver) {
dis= ver ? '' : 'none';
tab=document.getElementById('tabla');
tab.getElementsByTagName('tr')[num].style.display=dis;
}
function ocultarColumna(num,ver) {
dis= ver ? '' : 'none';
fila=document.getElementById('tabla').getElementsByTagName('tr');
for(i=0;i<fila.length;i++)
fila[i].getElementsByTagName('td')[num].style.display=dis;
}
-->
</script>
</head>
<body>
<table id="tabla" border="1">
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>
<p><input type="button" value="Quitar fila" onclick="ocultarFila(1,false)" />
<input type="button" value="Poner fila" onclick="ocultarFila(1,true)" />
<br />
<input type="button" value="Quitar columna" onclick="ocultarColumna(1,false)" />
<input type="button" value="Poner columna" onclick="ocultarColumna(1,true)" /></p>
</body>
</html>
