Inércia Sensorial

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

Comments 22 de November, 2005 sob Javascript.
Tags:

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:

PLAIN TEXT

JAVASCRIPT:

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:

PLAIN TEXT

HTML:

<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