Ocultar varias columnas en tabla

eduardo2009 · #1 (**permalink**) 19/04/2012, 08:34

Que tal como estan, tengo una funcion la cual me oculta una columna de una tabla, pero yo necesito que me oculte varias y la funcion la llamo en el evento onload, pero la unica manera que puedo es llamar la funcion y cambiar el numero de la columna este es mi codigo....

la funcion

Código PHP:

  <script type="text/javascript">

 function ocultarColumna(num,ver) {

  dis= ver ? '' : 'none';

  fila=document.getElementById('tabla1').getElementsByTagName('tr');

  for(i=0;i<fila.length;i++)

    fila[i].getElementsByTagName('td')[num].style.display=dis;

}

 </script>

Llamada de la funcion

Código PHP:

  onload="ocultarColumna(2,false),ocultarColumna(3,false)"

Habra alguna manera de ocultar al mismo tiempo la columna 3,4,8,10, etc...

Saludos y gracias por la ayuda!!!!

zalito12 · #2 (**permalink**) 19/04/2012, 08:40

Esto es JS no PHP.
Y con lo otro, con la función que tienes, puedes poner un bucle para cada columna pero no cambia mucho con lo que tienes.

eduardo2009 · #3 (**permalink**) 19/04/2012, 08:43

Ok, perdon me equivoque en el foro, y pues era lo que necesitaba saber si lo que estaba haciendo no estaba mal........ si me puedieran ayudar a cambiar el tema de foro se lo agradeceria...

y gracias por la informacion... saludos!!!

linuxzero · #4 (**permalink**) 19/04/2012, 08:49

Si, el codigo cambiaria bastante, ya que solo te ocuparias de decirle que columna mostrar, y dentro del codigo ocultarias todas las demas... es mucho mas prolijo el codigo tambien.

Seria algo asi:

Código Javascript:

Ver original<script type="text/javascript"> 
function mostrarColumna(num) { 
    fila=document.getElementById('tabla1').getElementsByTagName('tr'); 
    for(i=0;i<fila.length;i++) {
        if (i == num) {
            fila[i].getElementsByTagName('td')[num].style.display = "block"; 
        } else {
            fila[i].getElementsByTagName('td')[num].style.display = "none"; 
        }
    } 
}
</script>

Entonces con esto, ahora llamarias a la funcion asi:

Código Javascript:

Ver originalonload="mostrarColumna(2)"

furoya · #5 (**permalink**) 19/04/2012, 11:15

(Qué raro, lo encontré en la lista "Temas en el Foro : Javascript". Seguramente ya lo movieron.)

Hay una forma más fácil, pero más discutible.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
function borra(T){

var eco = "#" + T + "{display: none;}"
document.getElementById("foxtrot").innerHTML = eco;

}
</script>
<style type="text/css" id="foxtrot"></style>
</head>
<body>
<h2>Oculta una de tres columnas.</h2>

<form> <input type=radio name=delta value="alfa" onchange=borra(this.value)> Borra a || 
<input type=radio name=delta value="bravo" onchange=borra(this.value)> Borra b || 
<input type=radio name=delta value="charly" onchange=borra(this.value)> Borra c</form>

<table border=1><tbody><tr>
<td id=alfa> a </td><td id=bravo> b </td><td id=charly> c </td>
</tr><tr>
<td id=alfa> ALFA </td><td id=bravo> BRAVO </td><td id=charly> CHARLY </td>
</tr><tr>
<td id=alfa> alfa </td><td id=bravo> bravo </td><td id=charly> charly </td>
</tr></tbody></table>

</body>
</html>

Lo que ahora no estoy seguro es si funciona en todos los navegadores.

¿Como ocultar algunas filas de una tabla?

eduardo2009 · #6 (**permalink**) 19/04/2012, 19:11

Me parece buena idea linuxzero pero ya lo intente y solo me oculta los titulos de las celadas me los muestra............

Saludos!!!!!!!!!!

linuxzero · #7 (**permalink**) 19/04/2012, 19:15

postea el html de tu tabla...

furoya · #8 (**permalink**) 19/04/2012, 22:27

No anda porque le falta una vuelta. Y un detalle de CSS.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">

function borra() { 

	var cual = prompt("Cuál?.","2")

	var fila = document.getElementById('tabla1').getElementsByTagName('tr'); 
	var columnas = fila[0].getElementsByTagName('td').length; 
//alert(fila.length+" "+columnas)
	for(f=0; f<fila.length; f++) {

		for(c=0; c<columnas; c++) { //alert(c)
        if (c == cual) {fila[f].getElementsByTagName('td')[c].className = "oculta";} 
	else {fila[f].getElementsByTagName('td')[c].className = "muestra";}
        	}

    } 

}

</script>

<style type="text/css">

.oculta {display: none}
.muestra {display: table-cell}

</style>
</head>
<body>
<h2>Oculta una de tres columnas.</h2>

<input type=button value="Borra Columna" onclick=borra()>

<table border=1 id=tabla1><tbody><tr>
<td > 0 </td><td> 1 </td><td> 2 </td><td> 3 </td>
</tr><tr>
<td i> ALFA </td><td> BRAVO </td><td> CHARLY </td><td> DELTA </td>
</tr><tr>
<td > alfa </td><td > bravo </td><td > charly </td><td > delta </td>
</tr></tbody></table>

</body>
</html>

No pongo el onload porque con eso supongo que no hay problema.

Este ejemplo borra una sola columna; porque son más de la una de la mañana y no me acuerdo cómo se hace para que el bucle for revise varias coincidencias.

(Sí, ya sé que si pongo

Código:

for (alfa == bravo || alfa == charly || alfa == delta)

lo hace, pero seguro hay un método más fácil, como meterle un array, o una expresión regular)

furoya · #9 (**permalink**) 20/04/2012, 12:32

Imagino que el asunto está muy conversado en el Foro, pero ya que estaba hice un código para postear.
Supongo que lo del onload es para poner una función al cargar, que contenga las variables que identifican a cada columna a borrar. Aunque no entiendo el segundo, "false".
Tampoco sé bien para que te sirve, pero puedes mirar esto y tratar de adaptarlo a tu página.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>OCULTA COLUMNAS AL CARGAR.</title>
<script type="text/javascript">

function borra(cual) {

alert("Ésta es la tabla original. Se ocultarán columnas "+cual);

var ocultar = new RegExp(cual.split(",").join("|"));
var fila = document.getElementById('tabla1').getElementsByTagName('tr'); 
var columnas = fila[0].getElementsByTagName('td').length; 

for(f=0; f<fila.length; f++) {

for(c=0; c<columnas; c++) {
if (c.toString().search(ocultar) == -1) {fila[f].getElementsByTagName('td')[c].className = "muestra"; } 
else {fila[f].getElementsByTagName('td')[c].className = "oculta"; }
}

} 

}


</script>

<style type="text/css">

.oculta {display: none}
.muestra {display: table-cell}

</style>
</head>
<body onload = borra("1,4")> <!-- filas a borrar entre comillas y separadas por comas -->

<h2>Oculta algunas columnas.</h2>

<table border=1 id=tabla1><tbody><tr>
<td> 0 </td><td> 1 </td><td> 2 </td><td> 3 </td><td> 4 </td><td> 5 </td>
</tr><tr>
<td> ALFA </td><td> BRAVO </td><td> CHARLY </td><td> DELTA </td><td> ECO </td><td> FOXTROT </td>
</tr><tr>
<td> alfa </td><td> bravo </td><td> charly </td><td> delta </td><td> eco </td><td> foxtrot </td>
</tr></tbody></table>

</body>
</html>

Sigo pensando que hay una forma mejor de hacerlo. Pero ya tiene que estar inventada. Yo no la conozco, y si alguien quiere poner un link a alguna opción para

Código:

var ocultar = new RegExp(cual.split(",").join("|"));

...

if (c.toString().search(ocultar) == -1)

nos vendría muy bien. Porque confieso que intenté buscarla en gugl, y no tenía idea de la palabra clave que podía usar. Por eso no encontré un solo ejemplo.