Foros del Web - Ver Mensaje Individual

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