Ir para o conteúdo

Publicidade

 Estatísticas do Fórum

  • 0 Usuários ativos

    0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Foto:

Ocultar Linhas de uma Tabela

  • Por favor, faça o login para responder
7 respostas neste tópico

#1 Mário Monteiro

Mário Monteiro

    Admin iMasters

  • Administradores
  • 33.333 posts

Postado 22 outubro 2004 - 11:37

Bem pessoal,

Bem pessoal tenho uma pagina de cadastro de processos que é montada em uma tabela HTML, até ai tudo bem.

Gostaria de saber como é possivel, ocultar algumas linhas, apesar delas estarem lá.

Tipo assim estes processos podem ter varias empresas participando ou apenas uma, mas não quero colocar 10, 20 linhas com empresas, alias quero mas não é pra aparecer.

Apareceria apenas uma e um botão nova empresa que ao ser clicado mostraria outra linha com empresa e mais dois botões nova empresa e recolher empresa.

A partir da terceira linha eu me viro

Agradeço desde já a ajuda.
  • 0

#2 d.eleete

d.eleete

    douglastms.blogspot.com

  • Membros
  • 3.447 posts

Postado 22 outubro 2004 - 12:54

Fala mariofa.. eu acho q tem sim kra, eu to sem dreamweaver aqui, mas você teria que utilizar javascript e CSS juntos..

tente trabalhar com a seguinte class:

<style>
.invisivel{
visibilty: hidden;
}
</style>
  • 0

#3 Mário Monteiro

Mário Monteiro

    Admin iMasters

  • Administradores
  • 33.333 posts

Postado 22 outubro 2004 - 12:58

kra me dá só um exemplo pra ocultar uma linha da tabela


Editando:

Valeu pela dica d.eleete, achei um tuto na NET dessa parada, vou dar uma olhada e ve se aprendo.

Qualquer coisa posto aqui denovo

Editado por marioufpa, 22 outubro 2004 - 13:26 .

  • 0

#4 Lex

Lex
  • Membros
  • 1.584 posts

Postado 22 outubro 2004 - 13:39

Cara, eu não entendi muito bem.. mas se for pra esconder alguma coisa, você vai usar o que o d.eleete postou, visibility: hidden, isso vai fazer com qua alguma coisa "suma"..
vou dar um outro exemplo..
ASP
<script>
function esconde(x){
if(document.getElementById(x).style.visibility==false){
document.getElementById(x).style.visibility = "hidden";
}
else{
document.getElementById(x).style.visibility = "visible";}
}
</script>

<table>
<tr>
<td id="um"> um </td>
</tr>
<tr>
<td id="dois"> dois </td>
</tr>
<tr>
<td id="tres"> tres </td>
</tr>
</table>

<input type="button" value="Esconde um" onclick="esconde('um');" /> <br/>
<input type="button" value="Esconde dois" onclick="esconde('dois');" /> <br/>
<input type="button" value="Esconde tres" onclick="esconde('tres');" />

isso vai fazer com que alguma parte da tabela se esconda quando você clicar no botao.. e volte a aparecer quando você clicar novamente no msm botao..
  • 0

#5 Mário Monteiro

Mário Monteiro

    Admin iMasters

  • Administradores
  • 33.333 posts

Postado 22 outubro 2004 - 14:07

não serve, pois oculta mas não diminui o espaço, presisarei colocar bastante linha e não ia dar pra ficar um espaço grande entre esta parte das empresas e as outras partes do form.

Vou tentar mais um pouco e agruado novas propostas de soluções
  • 0

#6 Mário Monteiro

Mário Monteiro

    Admin iMasters

  • Administradores
  • 33.333 posts

Postado 22 outubro 2004 - 15:13

Bem pessoal sou eu denovo...

Encontrei o seguinte codigo do Guardião

ASP
<html>
<body>

<script>
function hideColumn (colIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[colIndex].style.display = 'none';
}
function showColumn (colIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[colIndex].style.display = '';
}
</SCRIPT>


<FORM>
<SELECT NAME="colIndex">
<script>
for (var i = 0; i < 5; i++)
document.write('<OPTION VALUE="' + i + '">' + i);
</SCRIPT>
</SELECT>
<INPUT TYPE="button" VALUE="hide column" ONCLICK="hideColumn(this.form.colIndex.selectedIndex);">
<INPUT TYPE="button" VALUE="show column" ONCLICK="showColumn(this.form.colIndex.selectedIndex);">
</FORM>

<TABLE ID="aTable" BORDER="1">
<script>
for (var i = 0; i < 3; i++) {
document.write('<TR>');
for (var j = 0; j < 5; j++)
document.write('<TD>' + i + ', ' + j + ' jsunity<\/TD>');
document.write('<\/TR>');
}
</SCRIPT>
</TABLE>

</body>
</html>


ele faz exatamente o que quero só que com colunas e não com linhas

tentei mudar o codigo mas não consegui pois diz que table.columns.length é zero

o que quero saber é se existe isso

procurei na net e só achei exemplos de ocultar colunas mesmo

Agradeço propostas
  • 0

#7 Mário Monteiro

Mário Monteiro

    Admin iMasters

  • Administradores
  • 33.333 posts

Postado 25 outubro 2004 - 17:52

bem pessoal, não consegui fazer como pensei no inicio, ocultando a linha toda, então fiz apenas ocultando o conteudo da celula, onde mando listar os combos com as empresas.

Mas valeu a força mesmo.
  • 0

#8 hyraxmaster

hyraxmaster
  • Membros
  • 118 posts

Postado 15 setembro 2005 - 22:20

e ai cambada... :P

hj me bateu essa mesma dúvida, pois vou ter que fazer um sitema de cadastro e estava pensando em ocultar alguns campos até que o usuário realmente deseje adicioná-los...

a novidade: eu encontrei a solução! :joia:

eu tomei como base o código do nosso amigo Guardião, seja lá quem for ele... :grin:

espero ter ajudado, abraços...:

<html>
<body>

<script>
function hideRow (rowIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
table.rows[rowIndex].style.display = 'none';
}
function showRow (rowIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
table.rows[rowIndex].style.display = '';
}
</SCRIPT>


<FORM>
<SELECT NAME="rowIndex">
<script>
for (var i = 1; i < 5; i++)
document.write('<OPTION VALUE="' + i + '">' + i);
</SCRIPT>
</SELECT>
<INPUT TYPE="button" VALUE="esconder linha" ONCLICK="hideRow(this.form.rowIndex.selectedIndex);">
<INPUT TYPE="button" VALUE="mostrar linha" ONCLICK="showRow(this.form.rowIndex.selectedIndex);">
</FORM>

<table width="100%" border="0" id="aTable">
<tr id="1">
<td>LINHA 1 </td>
<td>AAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr id="2">
<td>LINHA 2 </td>
<td>BBBBBBBBBBBBBBBBBBBBBB</td>
<td>BBBBBBBBBBBBBBBBBBBBBBBBB</td>
</tr>
<tr id="3">
<td>LINHA 3 </td>
<td>CCCCCCCCCCCCCCCCCCCC</td>
<td>CCCCCCCCCCCCCCCCCCCCCCC</td>
</tr>
<tr id="4">
<td>LINHA 4 </td>
<td>DDDDDDDDDDDDDDDDDDDD</td>
<td>DDDDDDDDDDDDDDDDDDDDDDD</td>
</tr>
</table>
</body>
</html>

  • 0




Publicidade

/ins>