[Resolvido] Como mudar a cor das células da tabela?

[N4Y4R4_ 1]

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á:

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;
}

[DiF 4.019]

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>joaozinho@pigangas.com</td>
    </tr>
    <tr>
        <td>02</td>
        <td>Funério Quietinho</td>
        <td>72</td>
        <td>funerio@quietinho.com</td>
    </tr>
    <tr>
        <td>03</td>
        <td>Hidrante de Oliveira</td>
        <td>32</td>
        <td>hidrante@deagua.com</td>
    </tr>
    <tr>
        <td>04</td>
        <td>Chitãozinho</td>
        <td>21</td>
        <td>chutaozinho@nogogoh.com</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

[N4Y4R4_ Autor do tópico 1]

Oi Dif, realmente é esse jeito que eu quero que minha tabela fique...

Eu consegui! Muito obrigada!

[DiF 4.019]

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/

[N4Y4R4_ Autor do tópico 1]

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!

[DiF 4.019]

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