Aproveitando uma dúvida no fórum do jQuery, vou mostrar uma das maneiras de selecionar coluna de uma tabela.

CSS

table {
font: 11px tahoma;
border:1px solid #dadada;
width:50%;margin:auto;
}
table thead tr {
text-align:left;
background:#fff;
}
table thead th {
background:#ccc;
cursor:pointer;
}
.over {
background:#555;color:#fff;
}
.odd {background:#eee;}
.even {background:#f6f6f6;}

HTML

<table cellspacing="1" cellpadding="2">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 4</th>
</tr>
</thead>
<tbody>
<tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
<tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
</tbody>
</table>

JavaScript

$(function(){
var $tr = $('table > tbody tr')
.filter(':odd').removeClass('even').addClass('odd')
.end()
.filter(':even').removeClass('odd').addClass('even')
.end();
var $thead = $('table > thead');
var data = [];
$thead.find('th').bind('click',function(){
var idx = this.cellIndex;
if ( data.length ) {
$(data).removeClass('over');
data = [];
}
$tr.each(function(){
$('td:eq('+idx+')',this).map(function(){ data.push(this); $(this).addClass('over')});
});
});
});

[s]

JunioR

Anúncios