Grid com efeito zebra onMouseOver/onMouseOut e destaque de seleção.

[vagner.net 0]

É uma solução bem simples, o javascript e o CSS podem ser otimizados.

 

java script:

<script>	function Click(e){		try{var element = e.target		  }catch(er){};		try{var element = event.srcElement  }catch(er){};		if (element.parentNode.className == 'trClickOver') 								element.parentNode.className = 'trOver';		else									element.parentNode.className = 'trClickOver';	}	function Out(e){		try{var element = e.target		  }catch(er){};		try{var element = event.srcElement  }catch(er){};		if (element.parentNode.className == 'trClickOver') 									element.parentNode.className = 'trClickOut';		else									element.parentNode.className = 'trOut';	}		function Over(e){		try{var element = e.target		  }catch(er){};		try{var element = event.srcElement  }catch(er){};				if (element.parentNode.className == 'trClickOut')									element.parentNode.className = 'trClickOver';		else									element.parentNode.className = 'trOver';	}		function setEvento(elemento, evento, funcao){		if (elemento.addEventListener) elemento.addEventListener(evento, funcao, false);				if (elemento.attachEvent)		 elemento.attachEvent("on"+evento, funcao);	}	window.onload = function(){ 		var lines = document.getElementsByTagName('tr');				for(var i=0; i<lines.length; i++){			setEvento(lines[i], 'click', 	Click	);			setEvento(lines[i], 'mouseout', 	Out	);			setEvento(lines[i], 'mouseover', 	Over	);						lines[i].className = 'trOut';		}	}			</script>

CSS:

<style>	.trOut	{	background-color:#CCCCCC; cursor:pointer;}	.trOver	{	background-color:#666666;	cursor:pointer;}	.trClickOut	{	background-color:#FFFF00;	 cursor:pointer;}	.trClickOver{	background-color:#FF3300;	 cursor:pointer;}	</style>

HTML:

<table>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>		<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr>	<tr>		<td>Coluna 1</td>		<td>Coluna 2</td>	</tr></table>

[prog_web 0]

Muito bom! Valeu!

[QuinhOboOZ 1]

Mt bom,

 

Mais queria que essa função funcionasse apenas na tabela onde os dados sao gerados linha a linha,

e está acontecendo um problema cmg, nao esta marcando a linha toda, apenas 1 coluna esta sendo marcada.

 

Alguma ideia doque possa estar errado?

 

Grato

[Ricardo.RFS 0]

Realmente show de bola!

 

Mas como o Quinho solicito, tem como ser apenas na tabela ou linha demarcadas com um class ou id?

 

Abrçs

[Ricardo.RFS 0]

Consegui fazendo as seguinte mudanças apenas no CSS e no HTML

 

<style>
	#teste tr.trOut   		{ background-color:#CCCCCC; cursor:pointer;}
	#teste tr.trOver		{ background-color:#666666; cursor:pointer;}
	#teste tr.trClickOut		{ background-color:#FFFF00; cursor:pointer;}
	#teste tr.trClickOver	{ background-color:#FF3300; cursor:pointer;}	
</style>

<table id="teste">

abrçs