Ir para conteúdo

POWERED BY:

Arquivado

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

cafdesigner

Mudar cor da TR ai clicar nela e checar um checkbox

Por , em Javascript

Recommended Posts

cafdesigner    0

cafdesigner
Postado

Pessoal, como posso fazer para mudar a cor da tr de uma tabela e checar um ckeckbox ao clicar na tr?Ex:1-clico na tr ela muda de cor e marca o checkbox2-clico novamente na tr ela volta pra cor original e desmarca o checkboxSerao varias tr e checkboxs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

no evento onclick da tr faz o seguinte:

 

onclick = function(){	var chk = this.getElementsByTagName("input");		chk[0].checked = !chk[0].checked;		if(chk[0].checked)	{		this.style.backgroundColor = "#C0C0C0";	}	else	{		this.style.backgroundColor = "#FFFFFF";	}}

Compartilhar este post

Link para o post
Compartilhar em outros sites

cafdesigner    0

cafdesigner
Postado

Vlw pela ajuda, tentei usar assim:function mudar_cor(campo){ var chk = this.getElementsByTagName(campo); chk[0].checked = !chk[0].checked; if(chk[0].checked) { this.style.backgroundColor = "#C0C0C0"; } else { this.style.backgroundColor = "#FFFFFF"; }}<tr onClick="mudar_cor('codigo[]')">Mas nao funcionou, ele nao selecionou o checkbox e nem mudou a cor da TR, isso no FireFox.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

document.getElementsByTagName retorna um array pelo nome da tag, ex.: o checkbox é INPUT se você quer usar do jeito que você passou usa assim.

 

function mudar_cor(linha){	var chk = linha.getElementsByTagName("input");	chk[0].checked = !chk[0].checked;	if(chk[0].checked)	{		linha.style.backgroundColor = "#C0C0C0";	}	else	{		linha.style.backgroundColor = "#FFFFFF";	}}<tr onClick="mudar_cor(this)">

PS.: dentro de cada linha exite apenas um input?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Então é isso você pode usar esse ultimo script, porque eu queria saber se tinha apenas um elemento input por linha. Testa e qualquer coisa posta as suas dúvidas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Mas foi como eu disse antesvc tem que usar como está no código que eu postei:var chk = linha.getElementsByTagName(codigo[]); <- assim como você está fazendo vai dar erro porque você está tentando pegar o elemento pelo atributo name, mas o que você deve fazer é pegar pelo nome do elemento -> var chk = linha.getElementsByTagName("input");

Compartilhar este post

Link para o post
Compartilhar em outros sites

cafdesigner    0

cafdesigner
Postado

Um detalhe, se eu clicar na tr ele seleciona o checkbox normal e muda a cor da tr, mas se eu clicar no checkbox diretamente ele nao seleciona o checkbox e nem muda a cor da tr.ai fiz assim no checkbox:onclick="opcoes('opcoes');mudar_cor_seleciona(this)"tentei sem o opcoes() que é um outro js e deu na mesma:onclick="mudar_cor_seleciona(this)"Acho que tem haver com o (this) ne?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

O que é isso estamos aqui justamente para explicar. Qualquer dúvida é só postar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

cafdesigner    0

cafdesigner
Postado

Um detalhe, se eu clicar na tr ele seleciona o checkbox normal e muda a cor da tr, mas se eu clicar no checkbox diretamente ele nao seleciona o checkbox e nem muda a cor da tr.ai fiz assim no checkbox:onclick="opcoes('opcoes');mudar_cor_seleciona(this)"tentei sem o opcoes() que é um outro js e deu na mesma:onclick="mudar_cor_seleciona(this)"Acho que tem haver com o (this) ne?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

O código abaixo não tem nada gerado dinamicamente, para você entender bem o que eu fiz, se não fechar com o que você precisa, posta o teu código para eu poder analisar.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Tabela</title><style type="text/css">div.opcoes{	display: none;}</style><script type="text/javascript">function mudar_cor(linha){	var chk = linha.getElementsByTagName("input");	chk[0].checked = !chk[0].checked;	if(chk[0].checked)	{		linha.style.backgroundColor = "#C0C0C0";	}	else	{		linha.style.backgroundColor = "#FFFFFF";	}}function mudar_cor_chk(obj,linha){	var tab = document.getElementById("tab");		obj.checked = !obj.checked;		if(obj.checked)	{		tab.rows[linha].style.backgroundColor = "#C0C0C0";	}	else	{		tab.rows[linha].backgroundColor = "#FFFFFF";	}}function mostraDiv(sID){	var chks = document.getElementById("form1").getElementsByTagName("input");	var sDiv = document.getElementById(sID);	var exibir = false;		for(i = 0; i < chks.length; i++)	{		if((chks[i].type == "checkbox") && (chks[i].checked))		{			exibir = true;			break;		}	}		if(exibir)	{		sDiv.style.display = "block";	}	else	{		sDiv.style.display = "none";	}}</script></head> <body><form id="form1"><table border="1" width="200px" id="tab"><tr onclick="mudar_cor(this);mostraDiv('opcoes');"><td><input type="checkbox" onclick="mudar_cor_chk(this,0);mostraDiv('opcoes');" /></td></tr><tr onclick="mudar_cor(this);mostraDiv('opcoes');"><td><input type="checkbox" onclick="mudar_cor_chk(this,1);mostraDiv('opcoes');" /></td></tr><tr onclick="mudar_cor(this);mostraDiv('opcoes');"><td><input type="checkbox" onclick="mudar_cor_chk(this,2);mostraDiv('opcoes');" /></td></tr><tr onclick="mudar_cor(this);mostraDiv('opcoes');"><td><input type="checkbox" onclick="mudar_cor_chk(this,3);mostraDiv('opcoes');" /></td></tr><tr onclick="mudar_cor(this);mostraDiv('opcoes');"><td><input type="checkbox" onclick="mudar_cor_chk(this,4);mostraDiv('opcoes');" /></td></tr></table></form><div id="opcoes" class="opcoes">	teste<br />	teste<br />	teste<br />	teste<br /></div></body> </html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

filipecrosk    0

filipecrosk
Postado

Ei hunternh

 

valeu pela ajuda que você deu para o colega aí....

comecei a desenvolver uma solução disso aqui e tava apanhando um pouco....

 

ai agora com esse help aqui consegui resolver já...

 

brigadão :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

cafdesigner    0

cafdesigner
Postado

hunternh, vou te amolar mais um pouco, tipo eu uso uma outra funçao nakeles checkbox, que quando clicar neles, me é exibido uma div oculta com o seguinte codigo:

 

function opcoes( sId ) {

var elementos = document.getElementById("frm").elements;

var sDiv = document.getElementById( sId );

var check = 0;

for(i=0;i<elementos.length;i++)

if(elementos.type == "checkbox" && elementos.checked == true) check++;

 

if(check == 0){

sDiv.style.display = "block";

}else{

sDiv.style.display = "none";

}

 

return false;

 

}

 

Tive que inverter os styles para funcionar(em partes) do jeito que tava...

Mas agora o que ocorre é que quando eu clico num checkbox ou na tr do checkbox ele me mostra a div e depois clico se eu clicar em mias um checkbox ou tr ele esconde a div, mas tipo o certo seria deixar a div exibida enquanto houver um checkbox/tr selecionado e só esconder ela se nao houver nenhum checkbox/tr selecionado.

 

To chamando assim:

onClick="opcoes('opcoes');mudar_cor_seleciona(this)"

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Alterei o ultimo script que fiz e inclui essa opções que você precisava, faz um teste.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Insert    0

Insert
Postado

hunternh tentei usar este js para imputs do tipo radio mas quando clico em um radio e vou clicar em outro ele nao remove a cor de fundo da tr anterior.o que eu tenho de mudar para ele funcionar com os radio buttons?

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