Ir para conteúdo
Fórum Script Brasil
  • 0

Trocar De Cor Uma Linha Da Tabela


Fabyo

Pergunta

Opa pessoal beleza?

então eu to fazendo um esquema tipo o que o phpmyadmin faz

eu tenho varios checkbox e eu fiz uma opção de marcar todos funcionou beleza

agora eu precisava de uma função que quando eu clica-se um chekbox a linha da tabela mudasse de cor, pra mostrar que essa linha foi selecionada

é igual o que o phpmyadmin faz

obrigado ate logo

Link para o comentário
Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

  • 0

faça o seguinte:

coloque id's nas suas <tr> e depois seta o style da tr com document.getElementById().style;

vou fazer um exemplo:

<script>
function trocaCor(id) {
var cor = document.getElementById(id).style.background
if(cor == '#0000FF') cor = '#FF0000';
else cor = '#0000FF';
document.getElementById(id).style.background = cor;
}
</script>
<form name="form" action="">
<table>
<tr id="1" style="{background-color:#0000FF}"><td><input type="checkbox" name="checkbox" onclick="trocaCor('1')"></td></tr>
<tr id="2" style="{background:#0000FF}"><td><input type="checkbox" name="checkbox" onclick="trocaCor('2')"></td></tr>
<tr id="3" style="{background:#0000FF}"><td><input type="checkbox" name="checkbox" onclick="trocaCor('3')"></td></tr>
</table>
</form>

Cara não sei se era isso q tu queria. Outra coisa, a cor do style é representada de diferentes formas pelos navegadores, se não funcionar, coloca um alert e vê que cor ele retorna no document.getElementById(id).style.background e faz a comparação.

Qualquer coisa posta ae

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites

  • 0

amigo obrigado pela ajuda, mas aqui não funcionou esse seu exemplo e eu testei no mozila e IE

eu queria tipo assim eu tenho uma tabela com varias linhas e em cada linha tem um checkbox

dai eu queria quando passase o mouse em cima ela auterasse a cor e quando clica-se nele mudasse a cor e quando tirava o checked

voltava a cor normal

tipo o sistema do phpmyadmin

Link para o comentário
Compartilhar em outros sites

  • 0

<html>
<head>
<script>
function trocaCor(id) {
	var cor = document.getElementById(id).style.background
	if(cor == 'rgb(255, 0, 0) none repeat scroll 0% 0%') cor = '#0000FF';
	else cor = '#FF0000';
	document.getElementById(id).style.background = cor;
}

function mouse(id){
	var cor = document.getElementById(id).style.background
	if(cor != 'rgb(255, 0, 0) none repeat scroll 0% 0%') {
        if(cor == 'rgb(0, 255, 0) none repeat scroll 0% 0%') cor = '#0000FF';
        else cor = '#00FF00';
        document.getElementById(id).style.background = cor;
	}
}
</script>
</head>
<body>
<form name="form" action="">
<table width="500">
<tr id="1" style="{background:#0000FF}" onmouseover="mouse(this.id)" onmouseout="mouse(this.id)"><td><input type="checkbox" name="checkbox" onclick="trocaCor('1')"></td></tr>
<tr id="2" style="{background:#0000FF}" onmouseover="mouse(this.id)" onmouseout="mouse(this.id)"><td><input type="checkbox" name="checkbox" onclick="trocaCor('2')"></td></tr>
<tr id="3" style="{background:#0000FF}" onmouseover="mouse(this.id)" onmouseout="mouse(this.id)"><td><input type="checkbox" name="checkbox" onclick="trocaCor('3')"></td></tr>
</table>
</form>
</body>
</html>

Dá uma olhada nesse código.

Fiz pra ti, mas sei q não é bem o q você queria, mas estou sem tempo pra ver isso agora. Tenta seguir meu raciocínio e termina-lá... ela funciona mas tem alguns bugs...

Testei no Mozilla 1.6

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites

  • 0

pra funcionar no IE tu precisa ver q cor ele retorna, e aí fazer a comparação no lugar da linha

if(cor == 'rgb(255, 0, 0) none repeat scroll 0% 0%') cor = '#0000FF';

utiliza

if(cor == '#FF0000') cor = '#0000FF';

bota um alert(cor) pra saber a cor no IE.

entendeu?

não tenho o IE se não eu testava pra ti...

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites

  • 0

Eu fiz assim e funcionou beleza:

echo" <tr bgcolor=\"#d5d5d5\" onmouseover=\"javascript: this.style.backgroundColor = '#99FF66';\" onmouseout=\"javascript: this.style.backgroundColor = '#d5d5d5';\" >";

só falta agora quando clicar no check a cor mudar e quando desmarcar a cor voltar ao normal

valeu

Link para o comentário
Compartilhar em outros sites

  • 0

Fabyo, eu testei este código e funcionou no Mozilla e no IE...

Abraços!

<script language="JavaScript" type="text/javascript">

<!--

function destacar_linha(linha) {

    if (document.getElementById(linha).className == 'estilo_linha_1') {

        document.getElementById(linha).className = 'estilo_linha_2';

    } else {

        document.getElementById(linha).className = 'estilo_linha_1';

    }

}

//-->

</script>

<style type="text/css">

<!--

.estilo_linha_1 { background-color: #ffffff; }

.estilo_linha_2 { background-color: #fffccf; }

-->

</style>

<table border="1">

<tr id="linha_1" class="estilo_linha_1">

  <td>

    <input type="checkbox" onclick="destacar_linha('linha_1');" /> Linha 1

  </td>

</tr>

<tr id="linha_2" class="estilo_linha_1">

  <td>

    <input type="checkbox" onclick="destacar_linha('linha_2');" /> Linha 2

  </td>

</tr>

</table>

Link para o comentário
Compartilhar em outros sites

  • 0

O pessoal só mais uma duvida

eu to usando onmouseover e onmouseout

dai ele anula a função acima

tem algum outro jeito de se fazer isso?

teria que funcionar igual ao phpmyadmin

quando passa o mouse por cima ele troca de cor e quando marcar o checbox a cor mudar e quando desmarcar o checkbox a cor voltar ao normal fica a a cor

valeu

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,1k
×
×
  • Criar Novo...