Inércia Sensorial

22 de November de 2005

Rollover em linhas de tabelas, clique para marcação

Filed under: Javascript — inerte @ 13:04

Esta pequena função foi feita copiando parte do código encontrado no phpMyAdmin. Eu precisava colorir linhas de tabelas conforme o mouse passava por elas, e colorí-las também quando o usuário clicasse nelas.

No Javascript original do phpMyAdmin, o style com as cores de fundo das células estão dentro do <td>. Além disso, como todas as células tem a mesma cor de fundo, bastava pegar a cor do primeiro <td> e aplicá-la na linha inteira.

Como minhas definições de estilo estão dentro de arquivos .css, tive de mudar a maneira de pegá-las. E como algumas colunas possuíam cores de fundo, e outras não, criei uma matriz para guardar os valores originais. Então quando o usuário passa o mouse em um <tr> com esta função, as cores de fundo definidas no arquivo .css são armazenadas, e recuperadas quando o mouse deixa a linha.

As duas primeiras variáveis são as cores que aparecerão quando o mouse estiver sobre a linha (cor_onmouseover) e quando ela for clicada (cor_onmousedown). Por padrão, são respectivamente um verde-limão fosco e um laranja creme. Como podem ver, não manjo nada de dar nomes às cores hexadecimais 😉

Abaixo segue o Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
cor_onmouseover = '#E7FFCE';
cor_onmousedown = '#FFCC99';
 
coresOriginais = Array();
 
function destacarLinha(celula, linhaNumero, evento)
{
    var celulas_filhas = null;
 
    // Tenta pegar o <tr> ou sai se o navegador não conseguir
    if (typeof(document.getElementsByTagName) != 'undefined') {
        celulas_filhas = celula.getElementsByTagName('td');
    } else if (typeof(celula.cells) != 'undefined') {
        celulas_filhas = celula.cells;
    } else {
        return false;
    }
 
    var celulas_filhas_qtd  = celulas_filhas.length;
    // Loop em todos os <td>'s
    for (c = 0; c < celulas_filhas_qtd; c++) {
        var corAtual = null;
        var corNova  = null;
 
        elemento = celulas_filhas[c];
        // Tem que fazer esse if porque quando o CSS tá em arquivo externo é
        // dessa maneira que pega a cor
        // Ie 5+;
        if (elemento.currentStyle) {
            corAtual = elemento.currentStyle['backgroundColor'];
            // Firefox, Moz
        } else if (window.getComputedStyle) {
            var elstyle = window.getComputedStyle(elemento, "")
            corAtual = elstyle.getPropertyValue('background-color');
        }
 
        // De RGB para Hexadecimal
        if (corAtual.indexOf("rgb") >= 0) {
            var rgbStr = corAtual.slice(corAtual.indexOf('(') + 1,
            corAtual.indexOf(')'));
            var rgbValues = rgbStr.split(",");
            corAtual = "#";
            var hexChars = "0123456789ABCDEF";
            for (var i = 0; i < 3; i++) {
                var v = rgbValues[i].valueOf();
                corAtual += hexChars.charAt(v/16) + hexChars.charAt(v%16);
            }
        }
 
        cor_index = linhaNumero + "_" + c;
 
        if (evento == 'over' && corAtual.toLowerCase() != cor_onmousedown.toLowerCase()) {
            corNova  = cor_onmouseover;
            coresOriginais[cor_index] = corAtual;
        } else if (evento == 'click') {
            if (corAtual.toLowerCase() == cor_onmousedown.toLowerCase()) {
                corNova = coresOriginais[cor_index];
            } else {
                corNova = cor_onmousedown;
            }
        } else if (evento == 'out' && corAtual.toLowerCase() != cor_onmousedown.toLowerCase()) {
            corNova = coresOriginais[cor_index];
        }
 
        if (corNova) {
            celulas_filhas[c].style.backgroundColor = corNova;
        }
    }
 
    return true;
}

Para utilizar a função, faça assim:

1
<tr onmouseover="destacarLinha(this, 1, 'over');"  onmouseout="destacarLinha(this, 1, 'out');"  onmousedown="destacarLinha(this, 1, 'click');">

O primeiro argumento é o número da linha na tabela. Ele é necessário para que a função saiba retornar às cores originais. Aumente-o de um em um conforme as ocorrências de <tr>s.

Qualquer dúvida, comentem 🙂

4 Comments »

  1. Parabéns! Ótimo script. Gostaria de saber se há alguma restrição no seu uso?
    Um abraço

    Comment by Paulo Mobus — 03 de August de 2006 @ 03:52

  2. Olá Paulo,

    Restrição do tipo, alguma licença de uso? Nenhuma a mais, pode fazer o quê bem entender com o código 🙂

    Comment by inerte — 03 de August de 2006 @ 14:41

  3. nao consegui usar…
    como eu coloco esse codigo em um html e ver seu funcionamento… desculpe.. sou iniciante

    Comment by gabriel — 07 de March de 2008 @ 15:14

  4. Cara! Parabens ótimo codígo!

    Comment by Marcelo Benevides — 30 de May de 2009 @ 17:02

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress