Ir para conteúdo
Fórum Script Brasil
  • 0

Ocultando Colunas De Tabela

Lamenza

Perguntado por Lamenza,

 Share

Pergunta

Lamenza

Lamenza

Postado
Postado

Estou tentando escrever um código que exiba/oculte determinadas colunas de uma tabela.

Use uma variável global para funcionar como "liga/desliga" da função.

Ocorre que, mesmo alterando a variável, o liga/desliga não funciona. O código é esse:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Teste</title>
<style>
.cExibe{display:block;}
.cOculta{display:none;}
</Style>
<script ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
var exibe = 1

function teste1(controle){
var c1 = document.getElementById('col_1');
var c2 = document.getElementById('col_2');
var c3 = document.getElementById('col_3');
var c4 = document.getElementById('col_4');
var c5 = document.getElementById('col_5');
var c6 = document.getElementById('col_6');
var c7 = document.getElementById('col_7');
var c8 = document.getElementById('col_8');
var c9 = document.getElementById('col_9');
var c10 = document.getElementById('col_10');
if (controle = 2 ) {
	document.seta.src = '../EAP/icones/exp_esq.PNG';
	c1.style.display = 'block';
	c2.style.display = 'block';
	c3.style.display = 'block';
	c4.style.display = 'block';
	c5.style.display = 'block';
	c6.style.display = 'block';
	c7.style.display = 'none';
	c8.style.display = 'none';
	c9.style.display = 'none';
	c10.style.display = 'none';
	}
if (controle = 1 ) {
	document.seta.src = '../EAP/icones/exp_dir.PNG';
	c1.style.display = 'none';
	c2.style.display = 'none';
	c3.style.display = 'none';
	c4.style.display = 'none';
	c5.style.display = 'none';
	c6.style.display = 'block';
	c7.style.display = 'block';
	c8.style.display = 'block';
	c9.style.display = 'block';
	c10.style.display = 'block';
	}
if (controle = 2 ) {
	exibe = 1 }	
else if (controle = 1 ) {
	exibe = 2 }	
}
-->
</Script>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="85%" ID="Tabela">
<colgroup>
<col id="col_1" class="cExibe" />
<col id="col_2" class="cExibe" />
<col id="col_3" class="cExibe" />
<col id="col_4" class="cExibe" />
<col id="col_5" class="cExibe" />
<col id="col_6" class="cExibe" />
<col id="col_7" class="cOculta" />
<col id="col_8" class="cOculta" />
<col id="col_9" class="cOculta" />
<col id="col_10" class="cOculta" />
</colgroup>
  <tr>
    <td width="4%" align="center"> </td>
    <td width="28%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="32%">&nbsp;</td>
    <td width="1%" style="font-family: Angsana New; font-size: 2 mm; border-style: solid; border-width: 0" bgcolor="#C0C0C0" valign="top">
    <img NAME="seta" border="0" src="../EAP/icones/exp_esq.PNG" alt="Deseja expandir a tabela?" onClick="teste1(exibe);" width="8" height="11"></td>
    <td width="28%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="32%">&nbsp;</td>
  </tr>
  <tr>
    <td width="4%">&nbsp;</td>
    <td width="28%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="32%">&nbsp;</td>
    <td width="1%" style="font-family: Angsana New; font-size: 2 mm; border-style: solid; border-width: 0" bgcolor="#C0C0C0" valign="top">&nbsp;</td>
    <td width="28%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="17%">&nbsp;</td>
    <td width="32%">&nbsp;</td>
  </tr>
</table>

</body>

</html>

O que está errado?

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
Guest Mr. Lomack

Guest Mr. Lomack

Postado
Postado

Olá,

desculpe, não examinei seu fonte, mas se entendi o q você precisa, é que se solicitado uma função, exiba ou iniba linhas ou colunas de uma tabela! certo? Se sim, então tente utilizar as dicas a seguir:

1° Quando for criar as colunas de sua table, coloque dentro do TD o stilo com aspas duplas, para que a mesma apareça na tela e um id para ela.

Ex.:

<td style=display:"" id="TesteDeColuna" >Escreva aqui, qualquer coisa!</td>

2° Dentro da sua função Java escreva o código, onde se troque o stilo desta coluna para "none", para que ela "desapareça".

Ex.:

document.all.TesteDeColuna.style.display=none;

3° Pronto, após criada a coluna com as especificações que indiquei, e criado a função pára que o Java, faça desaparecer sua coluna, o código estará pronto.

Espero ter ajudado

Link para o comentário
Compartilhar em outros sites
  • 0
Lamenza

Lamenza

Postado
  • Autor
Postado

Ao Mr. Lomack e aos amigos do fórum:

Encontrei a solução. O código é esse:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function exibe(id,display){ 
cols = document.getElementsByTagName('td'); 
for(c=0; c<cols.length; c++){ 
if(cols[c].getAttribute('c') == id){ 
cols[c].style.display = display; 
} 
} 
}

function trocacol(id,display){  
cols = document.getElementsByTagName('td'); 
valor = document.getElementById('chk1'); 
for(c=0; c<cols.length; c++){ 
if(cols[c].getAttribute('c') == id){ 
cols[c].style.display = display; 
} 
} 
valor.checked="checked";
}
//--> 
</script> 

</head> 
<body onload="trocacol('col2','none')"> 
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" ID="Tabela">
  <tr>
    <td width="6%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Item</td>
    <td width="21%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Descrição</td>
    <td width="7%" align="center" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" bgcolor="#3399FF">Valor Total</td>
    <td width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Início</td>
    <td width="1%" style="font-family: Angsana New; font-size: 2 mm; border-style: solid; border-width: 0" bgcolor="#C0C0C0" valign="top">
    <input type="checkbox" value="col2" id="chk1" onclick="e=(this.checked)?'':'none';d=(this.checked)?'none':'';exibe(this.value,d);exibe('col1',e);"></td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Jan</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Fev</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Mar</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Abr</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Mai</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Jun</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Jul</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Ago</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Set</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Out</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Nov</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Dez</td>
    <td width="8%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Acumulado</td>
    <td width="8%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#3399FF">Saldo</td>    
  </tr>
<tr> 
    <td width="6%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#00FFFF">&nbsp;</td>
    <td width="21%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#00FFFF">&nbsp;</td>
    <td width="7%" align="center" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" bgcolor="#00FFFF">&nbsp;</td>
    <td width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#00FFFF">&nbsp;</td>
    <td width="1%" style="font-family: Angsana New; font-size: 2 mm; border-style: solid; border-width: 0" bgcolor="#C0C0C0" valign="top">&nbsp;</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col1" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td c="col2" width="7%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#FFFFCC">&nbsp;</td>
    <td width="8%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#00FFFF">&nbsp;</td>
    <td width="8%" style="font-family: Arial; font-size: 7pt; font-weight: bold; color:#FFFFFF" align="center" bgcolor="#00FFFF">&nbsp;</td>    
</tr> 
</table> 
</body> 
</html>

Espero ajudar aos demais.

Abraços,

Lamenza

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...