Ocultar una Columna de una Tabla

jmacc · #1 (**permalink**) 28/04/2012, 09:15

Hola gente tengo un detalle en este Codigo.
Si realizo un check al chebox debe aparecer una columna de una tabla.

Código Javascript:

Ver original<script type="text/javascript">
    function showContentUno() {
        element = document.getElementById("contenidouni");
        si = document.getElementById("si");
        if (si.checked) {
            element.style.display='block';
        }
        else {
            element.style.display='none';
        }
    }
    
      function showContentDos() {
        element = document.getElementById("contenidodos");
        no = document.getElementById("no");
         if (no.checked) {
          
           ocultarColumna(1,true);
        }
        else {
        
            ocultarColumna(1,false);
        }
    }
    
function ocultarColumna(num,ver) {
      dis= ver ? '' : 'none';
        fila=document.getElementById('solicit').getElementsByTagName('tr');
        for(i=1;i<fila.length;i++)
            fila[i].getElementsByTagName('td cotenidodos')[num].style.display=dis;
}
    
</script>

El ShowContenUno funcione muy bien hace lo que necesito el dos no.
Lo que pretendo realizar es que por default

el ultimo campo de la tabla no aparesca.
La tabla con tiene datos de una consulta a la base de datos.
Implementar la funcion a la tabla:
En primera no aparece oculta.
En segunda solo funciona hasta hacer ckec al checkbox.
En tercera solo el primer row es afectado y todos los demas no.

Campo de mi Tabla.

Código HTML:

Ver original<td id='contenidodos' style="display: none;">NOOOOOOOO</td>

Ahora como hacer que la comlumna realize lo que quiero, lo he intentado poner dentro de un div pero no funciono.
De antemano gracias.

emprear · #2 (**permalink**) 28/04/2012, 11:15

Yo me inclinaría por usar ClassName y Css

Así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mostrar/ocultar columna 3 con javascript y ClassName</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
font-family: Arial, sans-serif;
font-size: 11pt;
}
table {
border-collapse: collapse;
}
thead {
background-color: #DDD;
}
td {
padding: 2px 4px 2px 4px;
}
th {
padding: 2px 4px 2px 4px;
}
 
/* Ocultamos por defecto */
th.detalles {
display: none;
}   
td.detalles {
display: none;
}
   
/* Mostrar */
table.ocultar_detalles th.detalles {
display: table-cell;
}
table.ocultar_detalles td.detalles {
display: table-cell;
}
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
function mostrarOcultar(){
 
    var ckb = document.getElementById("ver");
    if (ckb.checked) {
    document.getElementById('table').className ='ocultar_detalles';
    }else{  
    document.getElementById('table').className ='detalles';
    }
 
}
//]]>
</script>
</head>
<body>
<div>
<h1>Mostrar/ocultar columna 3 con Css + javascript y ClassName</h1>
<table id="table" border="1" width="450">
<thead>
<tr>
<th>Marca</th>
 
<th>Modelo</th>
<th class="detalles">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ford</td>
<td>Escort</td>
<td class="detalles">zzzzz</td>
</tr>
<tr>
<td>Toyota</td>
 
<td>Corolla</td>
<td class="detalles">ttttttttt</td>
</tr>
<tr>
<td>Renault</td>
<td>Megane</td>
<td class="detalles">rrrrrrrr</td>
</tr>
</tbody>
</table>
<form action="#">
<input type="checkbox" value="" id="ver" onclick="mostrarOcultar();"/>
</form>
</div>
 
</body>
</html>

Saludos