Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lordjulio

Como mudar o tamanho de uma coluna numa tabela?

Por , em Javascript

Recommended Posts

lordjulio    0

lordjulio
Postado

Olá Galera do forum!Estou precisando de uma ajuda de vcs. É assim, tenho uma tabela com 1 linha e 3 colunas. Na primeira coluna tem um menu, na segunda tem um conteudo e na terceira tem um botão. Este botão qdo clicado ele aumente a width da coluna na qual ele esta...ela tem width="9" e eu queria que ficasse width="200" (por exemplo) e qdo clicasse de novo, ela voltasse ao tamanho original. Como faço isto?Agradeço desde já!AbraçosLord Julio :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

lordjulio    0

lordjulio
Postado

Olá tmferreira!

 

Sua dica não me ajudou, pois sou iniciante nesta área de JS e você colocou na sua função parametro pra check box...eu tenho umbotão que é feito com uma imagem. Como fica a sua função neste caso? Preciso tb que a div altere seu tamanho para 200px (ele inicia com 9px) e se eu clicar de novo, ela some.

 

Abaixo seu código

 

<script language="javascript"><!--	function mudaDiv() {		var div = document.getElementById("teste");		var check = document.getElementById("check");		if (check.checked) {			div.className = "some";		} else {			div.className = "aparece";		}	}--></script><style><!--.aparece {display: block;}.some {display: none;}--></style><input type="checkbox" id="check" onclick="mudaDiv()"/><div id="teste" class="aparece">Teste</div>

Abraços!

 

Lord Julio

Compartilhar este post

Link para o post
Compartilhar em outros sites

lordjulio    0

lordjulio
Postado

Vlw tmferreira, mas não é isto que desejo!

 

Qdo aparecer o texto que vai dentro é grande e não deixa a tabela com 9px, ela tem que ficar neste tanmanho independente do que contenha a div. E a tabela deve "esticar" qdo a div esticar e exibir o conteudo.

 

Sabe como posso fazer isto?

 

Abaixo meu código com a adição do seu script:

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css"><!--.style1 {font-family: "Trebuchet MS",Verdana, Arial, Helvetica }.style2 {	font-family: "Trebuchet MS", Verdana, Arial, Helvetica;	color: #FFFFFF;	font-size: 12px;}.style3 {font-family: "Trebuchet MS", Verdana, Arial, Helvetica; color: #FFFFFF; font-size: 16px; font-weight: bold; }</style><script language="javascript"><!--~	var execucao = 0;	function mudaDiv() {		var div = document.getElementById("teste");		if (execucao == 0) {			div.className = "aumenta";			execucao = 1;		} else {			div.className = "diminui";			execucao = 0;		}	}--></script><style><!--.aumenta {width: 200px}.diminui {width: 9px; visibility:hidden;}--></style></head><body><table width="770" height="400" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td width="150" valign="top" bgcolor="#CCCCCC" style="padding:6px"><span class="style1">Menu</span></td>	<td valign="top" bgcolor="#990000" style="padding:6px">	  <p class="style3">Conteudo</p>	  <p class="style2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dictum, tortor id ultrices semper, elit orci imperdiet lectus, nec tincidunt augue ligula et tellus. Duis fringilla pede ac lectus. Cras lobortis imperdiet purus. Nullam pellentesque, sapien a congue vestibulum, ipsum sapien accumsan mauris, luctus dignissim ante ante vel pede. Mauris consectetuer. Nunc feugiat risus ut ligula. Donec nec magna eleifend risus fermentum vehicula. Vivamus dolor enim, porta ac, imperdiet vitae, gravida sed, metus. Duis ultrices orci vel eros. Sed nec diam quis pede commodo dictum. Curabitur at mi eget enim laoreet placerat. Sed eget ante in neque malesuada volutpat. Pellentesque scelerisque, nunc a rutrum scelerisque, turpis urna imperdiet urna, quis lacinia leo orci ut sem. Proin facilisis tellus vitae eros. Donec euismod tempus ligula. Nulla laoreet odio sit amet orci. Donec vel tellus. Nam vel ipsum eget mauris accumsan nonummy.</p>	  <p class="style2"> Maecenas tellus justo, blandit nec, vestibulum eu, auctor sit amet, diam. Nunc a libero. Praesent ligula. In eget sem quis sem molestie auctor. In condimentum. Mauris ultrices nulla id purus. Duis rhoncus metus quis mi. Maecenas quis risus vitae lacus rutrum vestibulum. Integer scelerisque, libero ac accumsan commodo, sapien urna mattis enim, sit amet vulputate tortor diam eget quam. Duis at nulla sit amet nisi tempor lobortis. Curabitur nibh neque, aliquet dignissim, laoreet nec, hendrerit et, dui. Donec faucibus euismod mauris. Aliquam ornare ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec velit. Suspendisse potenti. </p>	</td>	<td bgcolor="#CCCCCC" height="400" id="movel"><img src="btn_move.jpg" width="9" height="50" onclick="mudaDiv()" style="cursor:pointer"><div id="teste" class="diminui" style="border: 1px solid #000;">Aqui vem o conteúdo</div></td>  </tr></table></body></html>

Se mais alguem souber como faço, por favor me de a dica!

 

Abraços

 

Lord Julio

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito