Home
índice
Página anterior

Destacar Células em Tabelas

Exemplo Core (ToolTips)

Ônibus Dia Hora Plataforma Poltrona
Itapemirim 02/10/13 20:40 54 24
Cometa 02/10/13 20:40 23 29
Util 02/10/13 20:40 65 43
São José 02/10/13 10:40 24 03
Barra 02/10/13 11:40 74 25
Serra Dourada 10/10/11 20:40 54 24
Dorense 02/10/12 13:40 33 24
Timóteo 02/03/04 20:40 54 24
Paraíba 02/10/13 20:40 54 24
Rio Doce 02/10/13 20:40 54 24

Destacar Celulas em Tabelas

O código abaixo serve para deixar em evidencia as células de uma tabela.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("td").hover(function(){
$(this).addClass("destaque");
}, function(){
$(this).removeClass("destaque");
});
});

Criando Tooltip (Janelinhas)

O Tooltip é uma janelinha com informações adicionais sobre algum assunto. No exemplo a seguir está especificado como proceder para construir um tooltip.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("td").hover(function(){
$(this).addClass("destaque")
.prepend("<div class='tooltip'>Tooltip é uma janelinha com<br/>informações adicionais sobre algum assunto</div>");
}, function(){
$(this).removeClass("destaque");
$(".tooltip").remove();
});
});

Tooltip (Título e Valor da célula)

Nesse exemplo além de apresentar o texto, será apresentado o título e o valor da célula.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("#onibus thead tr th").each(function(i){
var n = i + 1;
var nomeColuna = $(this).text();
$("tr td:nth-child("+ n +")").hover(function(){
var nomeCelula = $ (this).text();
$(this).addClass("destaque")
.prepend("<div class='tooltip'>Coluna "+ nomeColuna +"<br/>Celula "+ nomeCelula +"</div>"); }, function(){
$(this).removeClass("destaque");
$(".tooltip").remove();
});
});
});

Marcando Células de Conteúdo igual

Aqui será apresentado além do título e valor da célula, também as células que tenham conteúdos iguais. Agiliza o processo ao verificar itens em um determinado cadastro, por exemplo.

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("#onibus thead tr th").each(function(i){
var n = i + 1;
var nomeColuna = $(this).text();
$("tr td:nth-child("+ n +")").hover(function(){
var nomeCelula = $(this).text();
$(this).addClass("destaque") .prepend("<div class='tooltip'>Coluna "+ nomeColuna +"<br/>Celula "+ nomeCelula +"</div>");
$(this).click(function(){
$("tbody tr").removeClass("destaque");
$(".tooltip").remove();
$("tbody tr:contains("+ nomeCelula +")")
.addClass("destaque");
}); }, function(){
$(this).removeClass("destaque");
$(".tooltip").remove();
});
});
});