Ir para conteúdo

POWERED BY:

Arquivado

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

Aprendiz/CE

[Resolvido] Descatar linha da TAG Table

Recommended Posts

Estou com um pequeno problema e gostaria a ajuda dos colega para resolver isso. Problema: Tenho um script em PHP que exibe uma lista de clientes. A lista é exibida em uma TAG TABLE que é gerada conforme seleção do usuário. Os registros são exibidos nas linhas da tabela com cores diferentes (tipo zebra) e ao passar o mouse sobre a mesma a linha é iluminada/destacada com outra cor. Até aí, tudo bem, funciona certinho. Só que eu não estou conseguindo retorna a cor anterior da linha da table após o mouse sair de cima da mesma. Como faço para pegar a cor anterior da linha antes da mesma ser trocada pela passagem do mouse para que eu possa devolve-la após o mouse sair da mesma?

 

Não postei o script pois o mesmo é bem simples. Ou seja coisa comum sem nada demais. Estou usando o evento onmouseover e onmouseout para fazer isso na TAG TR da TABLE.

 

Grato e aguardo qualquer tipo de ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

faz com javascript.

onmouseout="style.background='transparent'"
ou ao invés de transparent a cor que você quiser.

 

Olá,

 

Acho que você não entendeu o meu problema direito. Eu estou fazendo isso daí mesmo, mas como a table é ZEBRADA (cores auternadas) na linhas na hora de definir a cor tenho que sabe qual devo colocar novamente de volta de o bgcolor utlizar um unica coro fica fácil. No meu caso hora é uma cor, hora é outra, daí tenho que saber a cor que estava na TAG TR para poder informa-la. Entendeu?

 

Muito obrigado pela sua atenção e aguardo retorno.

 

Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Exemplo simples:

 

<html>
<head> 
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
var cor_antiga;
window.onload = function()
{
	var trs = id('lista').getElementsByTagName('tr');
	for( var i=0; i<trs.length; i++ )
	{
		trs[i].onmouseover = function()
		{
			cor_antiga = this.style.backgroundColor;
			this.style.backgroundColor = '#ff0';
		}
		trs[i].onmouseout = function()
		{
			this.style.backgroundColor = cor_antiga;
		}
	}
}

</script>
<style type="text/css">
.dif {
	background: #ccc;
}
</style>
</head>
<body>
	<table id="lista">
		<thead>
			<tr>
				<th>ID</th>
				<th>Nome</th>
				<th>Editar</th>
				<th>Excluir</th>
			</tr>
		</thead>
		<tbody>
			<tr class="dif">
				<td>1</td>
				<td>Bruno</td>
				<td>edit</td>
				<td>del</td>
			</tr>
			<tr>
				<td>7</td>
				<td>Rocha</td>
				<td>edit</td>
				<td>del</td>
			</tr>
			<tr class="dif">
				<td>15</td>
				<td>Moraes</td>
				<td>edit</td>
				<td>del</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Beleza. Aparentemente é isso mesmo que eu estou necessitando e pra ser especifico... essa linha "cor_antiga = this.style.backgroundColor;".

 

Vou adaptar aqui e ver como é que fica.

 

Muitíssimo obrigado pela sua atenção.

 

Dou retorno.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Willian,

 

Deu certinho, certinho. Era exatmente isso que eu estava procurando.

 

Só fiz um pequeno ajuste para que o cabeçalho/titulo da tabela não entrasse na condição.

 

Ajuste:

			if ( i > 0 ) {
				trs[i].onmouseover = function()
                {
                        cor_antiga = this.style.backgroundColor;
                        this.style.backgroundColor = '#ff0';
                }
                trs[i].onmouseout = function()
                {
                        this.style.backgroundColor = cor_antiga;
                }
			}

Mais uma fez obrigado pela sua valiosa atenção.

 

Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.