[Resolvido] criar ou viabilizar tabela

[yes 0]

senhores, tenho uma pagina que possui a seguinte tabela:

 

 

<table width="515" height="164" border="0" cellpadding="0" cellspacing="0" id="teste">
                <tr> 
                  <td height="14" colspan="4"><img src="novo/boleto_bancario.jpg" width="511" height="14"></td>
                </tr>
                <tr> 
                  <td height="19"> </td>
                  <td> </td>
                  <td> </td>
                  <td> </td>
                </tr>
                <tr> 
                  <td height="19"> </td>
                  <td><div align="center"><font color="#999999" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Opção 
                      Boleto Bancário</strong></font></div></td>
                  <td> </td>
                  <td> </td>
                </tr>
                <tr> 
                  <td width="13" height="19"> </td>
                  <td width="169"><div align="center"><font color="#999999" size="1" face="Verdana, Arial, Helvetica, sans-serif"><img src="novo/icone02_boleto.jpg" width="169" height="61"></font></div></td>
                  <td width="21">  </td>
                  <td width="312"> 
					<font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Sua inscrição será efetivada apenas após 
                    o<br>
					pagamento do boleto bancário, clique no<br>
					botão abaixo e imprima sua inscrição.</font></td>
                </tr>
                <tr> 
                  <td height="28"> </td>
                  <td><div align="center"> 
                      <input type="button" value="Imprimir o Boleto" name="B12" style="font-family: Verdana; font-size: 8pt">
                    </div></td>
                  <td><input name="C1" type="checkbox" onClick="apaga ()" value="ON"></td>
                  <td>
					<font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">
					Caso haja necessidade da impressão no nome<br>
					da empresa.</font></td>
                </tr>
                <tr> 
                  <td height="23"> </td>
                  <td> </td>
                  <td> </td>
                  <td>
					<table width="311" height="152" border="0" cellpadding="0" cellspacing="0" id="table2">
                      <tr>
                        <td height="19"> </td>
                        <td colspan="3"> </td>
                      </tr>
                      <tr> 
                        <td width="95" height="19"> <font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt"> 
                          Nome/Emp.:</font></td>
                        <td colspan="3"><input type="text" name="textfield3" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080" size="41"></td>
                      </tr>
                      <tr> 
                        <td height="19"> </td>
                        <td colspan="3"><font color="#666666" size="1" face="Verdana, Arial, Helvetica, sans-serif">* 
                          Nome para impressão no boleto.</font></td>
                      </tr>
                      <tr> 
                        <td width="95" height="19"> <font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt"> 
                          CNPJ:</font></td>
                        <td width="90"><font color="#333333"> 
                          <input name="textfield224" type="text" size="18" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                        <td width="49"><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Tel:</font></td>
                        <td width="77"><font color="#333333"> 
                          <input name="textfield225" type="text" size="1" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font><font color="#333333"> 
                          <input name="textfield226" type="text" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080" size="6" maxlength="8">
                          </font></td>
                      </tr>
                      <tr> 
                        <td width="95" height="19"><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Endereço:</font></td>
                        <td><font color="#333333"> 
                          <input name="textfield2242" type="text" size="18" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                        <td><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Nº:</font></td>
                        <td><font color="#333333"> 
                          <input name="textfield2262" type="text" size="10" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                      </tr>
                      <tr> 
                        <td width="95" height="19"><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Bairro:</font></td>
                        <td><font color="#333333"> 
                          <input name="textfield2243" type="text" size="18" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                        <td><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Compl.:</font></td>
                        <td><font color="#333333"> 
                          <input name="textfield2263" type="text" size="10" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                      </tr>
                      <tr> 
                        <td height="19"><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Cidade:</font></td>
                        <td><font color="#333333"> 
                          <input name="textfield2244" type="text" size="18" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                        <td><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Estado:</font></td>
                        <td><font color="#333333"> 
                          <input name="textfield2264" type="text" size="5" maxlength="2" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080">
                          </font></td>
                      </tr>
                      <tr> 
                        <td height="19"><font face="Verdana, Arial, Helvetica, sans-serif" style="font-size: 8pt">Responsavel:</font></td>
                        <td colspan="3"><input type="text" name="textfield32" style="font-family: Verdana; font-size: 8pt; border: 1px solid #000080" size="41"></td>
                      </tr>
                    </table>
					</td>
                </tr>
              </table>

 

com a função

function invisivel ()
{
var component = document.getElementById("teste");
component.setAttribute("style", "visibility: hidden"); 
}

eu a torno invisivel, mas o buraco no meio da pagina ainda fica, e com a função

function apaga()
{
var filho = document.getElementById("teste");
var pai = filho.parentNode;
var removido = pai.removeChild(filho);
}

eu a apago, mas não sei cria-la novamente.

qual o melhor metódo de fazer essa tabela aparecer e desaparecer, atualizando o restante das tabelas pra não ficar buraco?

[srnetcave 1]

Seguinte, coloque sua tabela dentro de uma div.

 

<button id="toggletbl" type="button">Alternar Tabela</button>
<div id="tblcontainer" style="float: left;">
    <table>
        ...
    </table>
</div>
<div id="outro_conteudo" style="float: left;">
.........
......
.....
....
...
..
.
</div>

seu elemento abaixo da tabela deve ter o float: left; sua tabela tambem.....agora quando voce esconder a tabela, o conteudo de baixo sobe para o lugar dela, e quando voce mostrar a tabela novamente, seu conteudo abaixo da tabela continua abaixo da tabela...

 

Jquery

 

$(function(){
    $('#toggletbl').click(function(){
        $('#tblcontainer').slideToggle();
    });
});

Obs...exemplo utilizando Jquery...

[yes 0]

cara, tem como posta em javascript normal.. não manjo muito de jquery..

 

nem precisa mais!

 

fui pesquisar e encontrei, resolvido!