(Resolvido) Imprimir uma Table (seu conteúdo)

Eder · Maio 21, 2008

Ola....tem como imprimir fácil o conteudo de uma table...

tenho várias tables(datas)

preciso que seja impressa somente a que o usuario escolher....tipo a data 01052008 ...então imprimiria somente a table com a ID=01052008

isto é possível sem usar o Css??

tipo como a gente faz para acessar direto o dia 01052008

#01052008

muito Agradecido.

KaKarotto · Maio 23, 2008

Não é possível sem Css.

Você usaria javascript para pegar a table escolhida do usuário e esconderia o resto das tabelas, mostrando apenas a que quer...

Só com html não dá não....

Eder · Maio 23, 2008

oba...belza?

Você usaria javascript para pegar a table escolhida do usuário e esconderia o resto das tabelas, mostrando apenas a que quer...

R. amigo poderia dar um exemplo com JavaScript?

:blush:

Grato :)

KaKarotto · Maio 24, 2008

Opa tem sim.

Um exemplo:


<html>
  <head>
<script>
var v=0
function show(id){

var tables=document.getElementsByTagName("table")
	if(!v){
		for(var x=0; x<tables.length; x++)
			if(tables[x].id!=id)
			tables[x].style.display="none"
	v=1
	}
	else{
		for(var x=0; x<tables.length; x++)
			if(tables[x].id!=id)
			tables[x].style.display="block"
        v=0
        }
}

</script>
    <title></title>
    <meta content="">
    <style></style>
  </head>
  <body>


<table style="background:blue" border="1" id="00001">
<tr><td><input type="checkbox" onclick="show('00001')"/></td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>


<table style="background:orange" border="1" id="00002">
<tr><td><input type="checkbox" onclick="show('00002')"/></td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>


<table border="1" style="background:green" id="00003">
<tr><td><input type="checkbox" onclick="show('00003')"/></td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>



</body>
</html>
[/codebox]

Me veio uma coisa agora...não sei como fica a impressão, acho que o javascript não consegue fazer a ocultação para a impressão, só consegue fazer na tela. Talvez tenha que fazer um redirecionamento para uma página idêntica que contenha a seguinte linha:

Com a sua tabela preferida sendo mostrada e as outras sendo ocultadas com display:none, na folha "estilo.css".

Abraço

Eder · Maio 26, 2008

Ola...bleza?

amigou funcinou certinho sem precisar usar um arquivo css com esta linha:

<link rel="stylesheet" type="text/css" media="print" href="estilo.css"/>

Do maneira que você você imprimiu certinho.... com este codigo de impressão:

java script:window.print()

Agora me veio uma dúvida....

você criou para que o usuario possa selecionar uma tabela e imprimir...beleza...imprimiu certinho..

como você trabalhou com o CheckBox...e se o usuario resolvesse escolher mais de uma tabela para imprimir...daria??

na tela sei que não...daria pois quando seleciona um...os outros ficam ocultos....mas daria para fazer desta maneira?

bom...agora acho que compriquei né? se der beleza...senão.......já fiquei super contente com o seu exemplo.....

Grande abraço...e muito agradecido.

falou

KaKarotto · Maio 26, 2008

Que bom que funcionou sem usar o media..eu não sabia disso.

Agora me veio uma dúvida....
você criou para que o usuario possa selecionar uma tabela e imprimir...beleza...imprimiu certinho..
como você trabalhou com o CheckBox...e se o usuario resolvesse escolher mais de uma tabela para imprimir...daria??
na tela sei que não...daria pois quando seleciona um...os outros ficam ocultos....mas daria para fazer desta maneira?
bom...agora acho que compriquei né? se der beleza...senão.......já fiquei super contente com o seu exemplo.....
Grande abraço...e muito agradecido.
falou

Olha, eu não acho uma boa ficar fazendo o trabalho todo e tal, mas nesse caso eu vou abrir uma exceção por dois motivos:

1 - Porque é rápido de fazer e não toma tempo.

2 - Porque eu gosto de fazer essas viadagens.

<script>
var arr=[]

window.onload=function(){
 var tabela=document.getElementById("menu-tabelas").
 getElementsByTagName("table")

     for(var x=0; x<tabela.length; x++)
     document.getElementById("painel").innerHTML+="Tabela "+(x+1)+" <input type='checkbox' onclick=\"inclui('"+tabela[x].id+"', this)\"/>"
}

function inclui(id, obj){
    if(obj.checked)
    arr.push(id)

    else
        for(var x=0; x<arr.length; x++)
            if(arr[x]==id)
            arr.splice(x, 1)
}

function Visualizar(n){
var tabela=document.getElementById("menu-tabelas").
getElementsByTagName("table")

    if(n){
        for(var x=0; x<tabela.length; x++)
        tabela[x].style.display="none"
        for(var x=0; x<arr.length; x++)
        document.getElementById(arr[x]).style.display="block"
    }
    else{
    for(var x=0; x<tabela.length; x++)
        tabela[x].style.display="block"
    
    }
}
</script>

<body>

<div id="menu-tabelas">
<table style="background:blue" border="1" id="00001">

<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>


<table style="background:orange" border="1" id="00002">

<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>


<table border="1" style="background:green" id="00003">

<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>
</div>

<div id="painel">
<input type="button" value="Vizualizar Impressão" onclick="Visualizar(1)" />
<input type="button" value="Resetar" onclick="Visualizar(0)" />

</div>
</body>

Eu fiz esse código pra ser extensível, ou seja, usando os dois divs que criei, o script vai se encarregar do resto.

Se quiser colocar mais tabelas você coloca, se quiser tirar você tira, o script vai continuar funcionando.

Pode deixar ele mais bonitinho usando Css.

Se precisar de alguns retoques é só falar, não tomando muito tempo ajudarei dentro do que for possível.

Agora ficou claro que o problema é todo em Javascript, então movendo...

Html, Xhtml, Css >>> Javascript, Xml, Dom

Aquele abraço

Eder · Maio 27, 2008

amigão.....seguinte:

testei o codigo porem....esta dando erro de script..

não consegui descobri o erro..pois achei o codigo meio complicadinho... :blush:

meu programa Namo Web EDitor apontou para esta linha:

var tabela=document.getElementById("menu-tabelas").

valeu....grato

KaKarotto · Maio 27, 2008

Ué...copiei e colei aqui e testei.

Tá funfando no iE e no FF. Como você fez aí?

Eder · Maio 27, 2008

amigão....só não tou entendendo o seguinte....

aonde ta os checkbox?

não tou compreendendo o seu raciocínio...pois existe um botão de reset e também um visualizar impressão....

poderia disponibilizar o seu teste aqui para download?? :unsure:

Grato

KaKarotto · Maio 28, 2008

Eder, os checkboxes estão aqui nesse trecho:

for(var x=0; x<tabela.length; x++)
     document.getElementById("painel").innerHTML+="Tabela "+(x+1)+" <input type='checkbox' onclick=\"inclui('"+tabela[x].id+"', this)\"/>"

São criados de forma dinâmica porque eu não sei quantas tabelas você vai usar. Se eu colocasse no html 4 checkboxes e você usasse 5 tabelas, não iria funcionar direito né?

Não é necessário fazer um arquivo para baixarem, é só copiar e colar o código.

Perceba, eu usei dois divs no meu exemplo, sem eles o código não funciona!!!!

Poste o codigo que está tendo problema. Eu acabei de copiar e colar aqui e funcionou, de novo.

Tá errando em alguma coisa aí.

Aquele abraço

Eder · Maio 28, 2008

Oba...carinha seguinte:

o problema esta no meu WebEditor...eu uso o Namo 3 e o mesmo acaba distorcendo as coisas...

quando colo esta parte do seu codigo aqui:

<body>

<div id="menu-tabelas">
<table style="background:blue" border="1" id="00001">

<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
<tr><td>Célula</td><td>Célula</td><td>Célula</td></tr>
</table>

ele automaticamente altera para:

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<div align="left"><table border id="00001" style="background-color:blue;">
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>

eliminando esta linha sua:

<div id="menu-tabelas">

fazendo com que de erro de JavaScript.

Ai testei no programa NVU e ai sim..funcionou certinho....

agora tenho duas opções...ou trabalho com o NVU ou não posso usar a sua dica

Mas Beleza.....o seu codigo na verdade ficou muito bom mesmo....

valeu a dica...

muito Grato pela paciência e ajuda.. :blush:

KaKarotto · Maio 28, 2008

fazendo com que de erro de JavaScript.
Ai testei no programa NVU e ai sim..funcionou certinho....
agora tenho duas opções...ou trabalho com o NVU ou não posso usar a sua dica
Mas Beleza.....o seu codigo na verdade ficou muito bom mesmo....
valeu a dica...
muito Grato pela paciência e ajuda..

Opa, é nozes.

Você tem uma terceira opção. Aprender HTML e Css e fazer seus códigos a mão.

Como eu e muitos desenvolvedores fazem.

Seu código ficará mais limpo, seu currículo mais valioso, seu tempo de trabalho diminuido e seu conhecimento aumentado.

WebEditor não presta.

Nvu não presta.

Dreamweaver não presta.

Todos esses editores que sujam seu código não prestam. Todos eles.

Você consegue em 15 linhas fazer o que eles precisam de 50.

Sugiro mesmo que dê um upgrade nos seus conhecimentos como desenvolvedor e aprenda a usar Html puro com Css. É um caminho mais difícil, mas como todo caminho difícil, no final, tem sua recompensa proporcional.

Sugiro um editor de codigos como TopStyle, PhpEditor no caso de querer aprender a fazer na mão.

Abraço.

Eder · Maio 28, 2008

é.....concordo com você.totalmente :blush:

acho que seria o ideal mesmo.

notei que o seu código é limpo e enxuto........comparado aos webeditores.....

valeu...as dicas, me ajudou muito.

Até eu aprender mesmo o html e css como sugeriu, por enquanto para fazer funcionar esta ultima dica sua, vou continuar esta página que estou montando com o NVU.

Um grande abraço e muito Agradecido pela ajuda.

falou

Entrar

(Resolvido) Imprimir uma Table (seu conteúdo)

Pergunta

Link para o comentário

Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns