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

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:

cor_onmouseover = '#E7FFCE';
cor_onmousedown = '#FFCC99';

coresOriginais = Array();

function destacarLinha(celula, linhaNumero, evento)
{
    var celulas_filhas = null;

    // Tenta pegar o  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 '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:

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 🙂