Ir para conteúdo

POWERED BY:

Arquivado

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

willwalker

[Resolvido] Mudar imagem de fundo a cada linha da tabela

Por , em Javascript

Recommended Posts

willwalker    2

willwalker
Postado

Gostaria se saber como mudar a cor ou a imagem de fundo em cada linha da tabela, por exemplo:

 

Linha 1 - Fundo Cinza

Linha 2 - Fundo Branco

Linha 3 - Fundo Cinza

Linha 4 - Fundo Branco

Linha 5 - Fundo Cinza

Linha 6 - Fundo Branco

Linha 7 - Fundo Cinza

Linha 8 - Fundo Branco

 

Etc...

 

Mas fazer de um modo dinamico, tipo um sim ou não... Alguem sabe como fazer isso ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

Basta você tirar o modulo de 2 a cada linha da tabela... determinando assim as linhas impares e pares.

 

seria algo assim:

 

if(numero_linha % 2 == 0)
referenciaLinha.style.backgroundColor = 'red';
else
referenciaLinha.style.backgroundColro = 'black';

Pergunta, não seria mais fácil fazer isso com uma lg serve side?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

O método do amigo klaygomes é excelente e funciona para a maioria absoluta dos casos! Na verdade, é o método mais utilizado, tanto em JavaScript, quanto em outras linguagens server-side.

 

No entanto, apenas para título de curiosidade (pois esse fórum possui muitos leitores que o acessam através de pesquisas por palavras-chave em sites de busca), irei deixar um outro método, muito menos utilizado, que muda a cor de 3 ou mais linhas, conforme a necessidade do desenvolvedor.

 

Eu fiz esse código certa vez pois precisava montar estatísticas em grupos de 3, mas ele pode ser adaptado para qualquer ocasião.

 

<html>
<head>
<title>Zebra lines</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">

var linha = 0;
var frase = new Array();
frase[0] = "Essa é minha frase 1";
frase[1] = "Essa é minha frase 2";
frase[2] = "Essa é minha frase 3";
frase[3] = "Essa é minha frase 4";
frase[4] = "Essa é minha frase 5";
frase[5] = "Essa é minha frase 6";
frase[6] = "Essa é minha frase 7";
frase[7] = "Essa é minha frase 8";
frase[8] = "Essa é minha frase 9";

var i;
for(i = 0; i < frase.length; i++){
	if (linha == 0) {
		document.write("<div style='background-color:#FFFFFF'>"+frase[i]+"</div>");
		linha++;
	}else if(linha == 1) {
		document.write("<div style='background-color:#F7F7F7'>"+frase[i]+"</div>");
		linha++;
	}else{
		document.write("<div style='background-color:#EFEFEF'>"+frase[i]+"</div>");
		linha = 0;
	}
}
</script>
</body>
</html>

Ele não é tão curto quanto o do amigo klaygomes, mas como eu disse... essa forma de script colorindo 3 linhas ou mais é bem menos utilizada.

 

Abraços a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Muito boa, é bem menos utilizada mesmo, porque na verdade isso de mudar a cor da linha é só para identificar melhor cada linha...

 

Obrigado mesmo ajudaram muito! XD

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