Esconder Columnas tipo excel

Berletzis · #1 (**permalink**) 17/06/2004, 16:37

Saludos banda, tengo una pekeña duda y mejor aun me urge enterle asi ke si teneis un codifo por ahi pues estaria de pelos. ahi les va..

Tengo una tabla en una base de datos con mas de 60 campos, a la hora de consultarlos en el explorador pues son demasiados campos y pues es demasiado scrollear de izquierda a derecha arriba abajo y vicerversa..

Lo que quiero es ke por medio del lado del cliente utilizando javascript o alguna otra tecnlogia, pueda esconder las celdas o reducirlas la minimo para asi poder ir encogiendo la tabla y no tener que scrollear tanto.

Esto es que si de 60 campos kiero esconder 40 pues que cada columna tenga arribita en el encabezado su opcion de esconder y al darle click la esconda y pues que de alguna manera se pueda volver a la normalidad esa columna.

Si me he dado a enteder pues de maravilla y no estamos viendo si necesitan alguna cosita pues estoy casi todo el dia en linea.. bye GRACIAS por su apoyo. ciao

xcorpyon · #2 (**permalink**) 17/06/2004, 18:10

...pues a mi se me ocurre una solucion, 'fácil' para el lado del cliente (con javascript x supuesto) pero que creo q deberías esforzarte bastante más en la programacion del lado del servidor si la quisieras implementar creando una página dinámica como es lo que parece que quieres.

Te voy a dar el esquema de lo que sería la tabla:

Lo más seguo es que la tabla que generas en tu pagina consiste en M filas, y dentro de cada fila N columnas...

Pues la idea sería tener una tabla con 2 filas y M columnas.

En la 1ª fila y por cada columna de la misma tendrías una imagen (muy pequeña, de unos 5x5 pixels x ej) que sería la que utilizas para mostrar u 'ocultar' la columna en cuestion (más que ocultar sería ajustar la columna al ancho de la imagen como verás más adelante) gracias a una funcion mostrar_ocultar(columna) de javascript.

En la 2ª fila y por cada columna tendrías una nueva tabla con N filas de 1 columna (por tanto cada una de estas tablas sería una columna de la tabla que tienes actualmente en tu pagina).

Cada una de estas tablas 1xN llevaría un id uníco en la etiqueta <table id="cantidad_producto">, de forma que puedas seleccionarla. Ese id podría ser el nº de columna, o mejor el nombre del campo de la columna...

Ya solo quedaría codificar mostrar_ocultar(id), que sería algo asi:
function mostrar_ocultar(id) {
si (id.display==visible)
id.display=none;
si_no
id.display=visible;
}

Espero que me hayas entendido y que te pueda haber ayudado, hasta luego y suerte

JavierB · #3 (**permalink**) 18/06/2004, 02:40

Hola, Berletzis.

Prueba este código a ver si te ayuda:

Código HTML:

<html>
<head>
<script>
function ocultar(num) {
	elem=document.getElementById('tabla');
	fila=elem.getElementsByTagName('tr');
	for(i=0;i<fila.length;i++)
		fila[i].getElementsByTagName('td')[num].style.display='none';
}
function mostrar() {
	elem=document.getElementById('tabla');
	fila=elem.getElementsByTagName('tr');
	for(i=0;i<fila.length;i++) {
		celda=fila[i].getElementsByTagName('td');
		for(j=0;j<celda.length;j++)
			celda[j].style.display='block';
	}
}
</script>
</head>

<body>
<input type="button" value="Mostrar todo" onclick="mostrar()" />
<table id="tabla" width="75%" border="1">
  <tr>
    <td onclick="ocultar(0)">1-1</td>
    <td onclick="ocultar(1)">1-2</td>
    <td onclick="ocultar(2)">1-3</td>
    <td onclick="ocultar(3)">1-4</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
</table>
</body>
</html>

Saludos,

Berletzis · #4 (**permalink**) 18/06/2004, 15:00

Que les parece mejor esta?????????? Creo esta mejor y es parecido a lo de ustedes

Berletzis · #5 (**permalink**) 18/06/2004, 15:01

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Columnas  1  2  3  4  5</title>

<script language="javascript">
var showMode = 'table-cell';
if (document.all) showMode='block';
function toggleVis(btn){
btn = document.forms['tcol'].elements[btn];
cells = document.getElementsByName('t'+btn.name);
mode = btn.checked ? showMode : 'none';
for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
}

</script>

</head>

<body>
<form name="tcol" onsubmit="return false">
Columnas
<input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
<input type=checkbox name="col4" onclick="toggleVis(this.name)" checked> 4
<input type=checkbox name="col5" onclick="toggleVis(this.name)" checked> 5
</form>

<table border=1>
<tr>
<td name="tcol1" id="tcol1" class="bold">columna1</td>
<td name="tcol2" id="tcol2">columna2</td>
<td name="tcol3" id="tcol3" class="italic">columna3</td>
<td name="tcol4" id="tcol4">columna4</td>
<td name="tcol5" id="tcol5">columna5 </td>
</tr>
<tr>
<td name="tcol1" id="tcol1" class="bold"> </td>
<td name="tcol2" id="tcol2"> </td>
<td name="tcol3" id="tcol3" class="italic"> </td>
<td name="tcol4" id="tcol4"> </td>
<td name="tcol5" id="tcol5"> </td>
</tr>
</table>

</body>

</html>

JavierB · #6 (**permalink**) 19/06/2004, 04:24

Hola de nuevo.

Está bien la idea de utilizar checkbox para marcar que columnas deben verse. Lo que creo que no está bien en tu código es que pones el mismo id a varias celdas y se supone que los id deben ser únicos.

Voy a tomar nota de "table-cell" que no había usado nunca. Pensaba que con "block" funcionaría en IE y Netscape, pero ya veo que no

Es lo bueno de estos Foros, se aprende preguntando y contestando

Saludos,