Mudar de cor de fundo de uma tabela

[tiagocaus 1]

Olá Pessoal,

Estou fazendo esse cod para mudar a cor de fundo de uma tabela quando passar o mouse sobre ai estou tentando modificar para quando eu clicar na tabela um outra cor ser Fixada mesmo quando eu tirar o mouse da tabela... bom eu consegui, mas agora tem um outro problema... quando o mouse passa sobre as tabela ele muda para a o Tom de Cinza'#E8E8E8' mas não volta para o branco ai todas as tabelas que o mouse passar vai ficando cinza...rsrs

 

ALguem pode me ajudar?

Fico aguradecido...rsrs

 

 

// JavaScript Document
/*
inicializa todas as linhas de tabela com os eventos 
onmouseover e onmouseout para mudarem de cor de fundo
Por: www.hostcia.net
*/
function init() {
	/* recebe uma lista com todos os elementos de tag <tr> */
	var lista = document.getElementsByTagName('tr');
	for (i = 0; i < lista.length; i++) {
		lista[i].onmouseover = function() {
			this.style.background = '#E8E8E8'
		}
		
		lista[i].onmouseout = function() {
			this.style.background = 'white'
		}
		
		lista[i].onclick=function(){
			this.style.background = '#FFCC99';
		}

		lista[i].onmouseout = function() {
			if (style.backgroundColor != '#FFCC99') {
				style.background = 'white';
			}
		}
	}
}

[Carutcho 0]

Porr4 q problema maneiro de procurar solução.

 

Seguinte, descobri q quando você insere a cor no CSS ele joga para padrão RGB, se você der um alert para verificar o background, você vai ver que ele naum mostra a cor em Hexadecimal "#fff" e sim em rgb "rgb(222,222,222)"..

 

Achei uma coisa aqui que você vai conseguir solucionar o seu problema, dê uma olhada nesse link aqui

 

 

Ve aee se te da uma luz.

 

Absss

[Alex Hiroshi 7]

Mas por que você usa dois onmouseout? Não volta para o branco porque o evento que está 'funcionando' é o último, e esse está errado. Coloque um this antes dos style.background.

[tiagocaus 1]

Mas por que você usa dois onmouseout? Não volta para o branco porque o evento que está 'funcionando' é o último, e esse está errado. Coloque um this antes dos style.background.

 

Olá Amigo, Obrigado...

Retirei o onmouseout que estava sobrando...rsrs. e eu nao posso colocar um THIS senao a cor nao fica fixada quando eu tiro o mouse de sobre a tabela.

Esta assim agora:

function init() {
	/* recebe uma lista com todos os elementos de tag <tr> */
	var lista = document.getElementsByTagName('tr');
	for (i = 0; i < lista.length; i++) {
		lista[i].onmouseover = function() {
			this.style.background = '#E8E8E8'
		}
		
		lista[i].onclick=function(){
			this.style.background = '#FFCC99';
		}

		lista[i].onmouseout = function() {
			if (style.backgroundColor != '#FFCC99') {
				style.background = 'white';
			}
		}
	}
}

 

Se alguem poder me ajudar.

[Carutcho 0]

O problema está onde postei la amigo :)

 

você não pode comparar a cor do backgroud atual com hexadecimal "#ffffff" tem q comparar com rgb(111,111,111)..

 

Da uma olhadinha no link q postei la emcima, você vai se ligar q o problema ta na comparação das cores de background, justamente nessa linha aqui:

if (style.backgroundColor != '#FFCC99') {

 

abssss

[Alex Hiroshi 7]

Mesmo comparando o valor certo, se não tiver uma referência para a tr (this, por exemplo), não vai funcionar.

[klaygomes 0]

tiagocaus,

dê ouvidos ao alex, ele esta certo, style é uma propriedade relativa objetos do tipo HTMLElement.

Você precisa de uma referencia para acessa-la que neste caso é o escopo da função (o this).

[Carutcho 0]

Saquei,

 

O lance que eles falaram está correto, porém me foquei mais em uma coisa q eu pensei q você queria fazer, pelo q interpretei no seu algoritmo e consequentemente está na mesma linha de onde estava o erro do código, no caso você só quer q volte a ficar com a linha branca, quando a cor for diferente da cor que você tem quando clica, ou seja, só fica branco quando está cinza, se está amarelo tem q continuar amarelo.

 

Ou seja cada um olhou para o problema com uma visão diferente, segue o código para você conferir.

 

 

<script>
function init() {
	/* recebe uma lista com todos os elementos de tag <tr> */
	var lista = document.getElementsByTagName('tr');
	for (i = 0; i < lista.length; i++) {
		lista[i].onmouseover = function() {
			this.style.background = '#E8E8E8'
		}
		
		lista[i].onclick=function(){
			this.style.background = '#FFCC99';
		}

		lista[i].onmouseout = function() {
			if (!this.style.backgroundColor.compareColor('#FFCC99')) {
				this.style.background = 'white';
			}
		}
	}
}


// código que peguei no link 

 String.prototype.compareColor = function(){
	if((this.indexOf("#") != -1 && arguments[0].indexOf("#") != -1) || 
	  (this.indexOf("rgb") != -1 && arguments[0].indexOf("rgb") != -1)){
	  return this.toLowerCase() == arguments[0].toLowerCase()
	}
	else{
	  xCol_1 = this;
	  xCol_2 = arguments[0];
	  if(xCol_1.indexOf("#") != -1)xCol_1 = xCol_1.toRGBcolor();
	  if(xCol_2.indexOf("#") != -1)xCol_2 = xCol_2.toRGBcolor();
	  return xCol_1.toLowerCase() == xCol_2.toLowerCase()
	}
  }


  String.prototype.toRGBcolor = function(){
	varR = parseInt(this.substring(1,3), 16);
	varG = parseInt(this.substring(3,5), 16);
	varB = parseInt(this.substring(5,7), 16);
	return "rgb(" + varR + ", " + varG + ", " +  varB + ")";
  }

//fim do código que peguei no link.
</SCRIPT>

<body onload="init()">

<table>
	<tr>
		<td>testee 1</td>
		<td>testee 2</td>
		<td>testee 3</td>				
	</tr>
	<tr>
		<td>testee 4</td>
		<td>testee 5</td>
		<td>testee 6</td>				
	</tr>
	<tr>
		<td>testee 7</td>
		<td>testee 8</td>
		<td>testee 9</td>				
	</tr>
</table>
</body>

[tiagocaus 1]

 

 

Amigão... é isso mesmo que eu precisei...rsrs

é desse geito mesmo...rsrs

 

 

Obrigado mesmo!!!