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();
});
});
});