Como mudar a cor das células da tabela?

N4Y4R4_ · 15 de julho de 2013

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 · 15 de julho de 2013

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

N4Y4R4_ · 15 de julho de 2013

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

Eu consegui! Muito obrigada!

DiF · 15 de julho de 2013

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_ · 15 de julho de 2013

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!