Home
índice
Página anterior

Destacar Colunas em Tabelas

Exemplo Core

Ô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 Colunas em Tabelas

O código abaixo retorna uma janela de alerta com a mensagem houve um click. Para conferir clique em um dos elementos do cabeçalho (cor preta) da tabela. A função each passa como parâmetro a posição do elemento.

No jvaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("#onibus thead tr th").each(function(){
$(this).click(function(){
alert("click");
});
});
});

Mostrando a posição clicada

A função each passa como parâmetro a posição do elemento, usando i que contém a posição da célula. Clicando no elemento, a janela de alerta exibe a mensagem: click e a posição que começa do 1.
No jvaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("#onibus thead tr th").each(function(i){
var n = i - 1;
$(this).click(function(){
alert("click: " +n);
});
});
});

Destacando a posição na Coluna

No javaScript:
$(document).ready(function(){
$("#onibus tbody tr:odd").addClass("impar");
$("#onibus thead tr th").prepend("<span>+</span>")
.css("cursor", "pointer");
$("#onibus thead tr th").each(function(i){
var n = i - 1;
$(this).click(function(){
$("td").removeClass("destaque");
$(this)
.parents("thead")
.siblings("tbody")
.children("tr").each(function(){
$(this).children("td:eq("+n+")")
.addClass("destaque");
});
});
});
});