Ir ao conteúdo

Como mudar a cor das células da tabela?


N4Y4R4_

Posts recomendados

Postado

Pessoal, eu quero que ao passar o mouse (hover) sobre as linhas de colunas, TODAS as células daquela determinada linha. mudem de cor.

Eu consegui que ficasse com a cor diferente só que em cada célula, e não na linha toda de células... Eu quero esse efeito aqui da cor verde ficando em todas as células da linha em que o mouse está:

yLm4EHy.jpg

Eu não sei como fazer isso, só sei que tenho um script que faz o efeito que eu quero e o código é esse:

<th width="100" bgcolor="#fff" scope="col"  onmouseover="this.className = 'rowselected';" onMouseOut="this.className = '{$row.shadeclassname}';"> </th>

E o css do código da classe .rowselected é esse:

.rowselected
{
COLOR: #003399;
BACKGROUND-COLOR: #fefcd2;
}

  • Moderador
Postado

Olá,

Considerando este exemplo:


<table id="usuario">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Idade</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>João das Pitangas</td>
<td>89</td>
<td>[email protected]</td>
</tr>
<tr>
<td>02</td>
<td>Funério Quietinho</td>
<td>72</td>
<td>[email protected]</td>
</tr>
<tr>
<td>03</td>
<td>Hidrante de Oliveira</td>
<td>32</td>
<td>[email protected]</td>
</tr>
<tr>
<td>04</td>
<td>Chitãozinho</td>
<td>21</td>
<td>[email protected]</td>
</tr>
</tbody>
</table

CSS:


table{font-family: arial; }

table, td, tr{ border: 1px solid #000;}
.destacar{ background: green; color: #fff;}

jQuery:


$(document).ready(function(){
var seletores = $("table#usuario tbody tr");
seletores.hover(function(){
$(this).addClass("destacar");
},function(){
$(this).removeClass("destacar");
}
);
});

Explicando basicamente o funcionamento do código acima, criei uma variável, atribui os seletores "table#usuario", elemento tbody e tr agrupados. Apliquei a função hover.

Esta função possui dois parâmetros, na qual, cada parâmetro é uma outra função que tem como finalidade adicionar uma CLASS nos seletores e outra para remover esta CLASS

ps: o "$(this)" é usado para referenciar o próprio objeto.

Veja o resultado aqui( clica em "run" e depois teste no canto direito):

http://jsfiddle.net/xeGHN/3/

Att,

Dif

  • Moderador
Postado

Então, do jeito que você quer, está faltando mais um elemento na sua estilização para funcionar adicione o elemento td depois de tr:hover ficando assim:


table.tablesorter tr:hover [COLOR="Red"]td[/COLOR] {
background-color: #F0F0F0;
}

podes ver seu código funcionando aqui:

http://jsfiddle.net/WuUvC/4/

Postado
Então, do jeito que você quer, está faltando mais um elemento na sua estilização para funcionar adicione o elemento td depois de tr:hover ficando assim:


table.tablesorter tr:hover [COLOR="Red"]td[/COLOR] {
background-color: #F0F0F0;
}

podes ver seu código funcionando aqui:

http://jsfiddle.net/WuUvC/4/

Era justamente esse elemento que estava faltando mesmo! Deu certo agora! Muito obrigada! :D

  • Moderador
Postado

Caso o autor do tópico necessite, o mesmo será reaberto, para isso deverá entrar em contato com a moderação solicitando o desbloqueio.

Arquivado

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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!