Zebrar Listas

Estava procurando opções para zebrar uma listagem paginada que estou fazendo utilizando jsp. Durante minha busca encontrei diversas opções. Juntei algumas, outras achei no mesmo local.  Mas no fim utilizei uma opção de zebrar puramente em css.

DOM Scripting:


/*
var tables = document.getElementsByTagName(“table”);
for ( var t = 0; t < tables.length; t++ ) {
var rows = tables[t].getElementsByTagName(“tr”);
for ( var i = 1; i < rows.length; i += 2 )
if ( !/(^|s)odd(s|$)/.test( rows[i].className ) )
rows[i].className += ” odd”;
}
*/

Yahoo UI:


/*
var tables = document.getElementsByTagName(“table”);
for ( var t = 0; t < tables.length; t++ ) {
var rows = tables[t].getElementsByTagName(“tr”);
for ( var i = 1; i < rows.length; i += 2 )
YAHOO.util.Dom.addClass( rows[i], “odd” );
}
*/

Dojo:

/*
var each = dojo.lang.forEach;

each(document.getElementsByTagName(“table”), function(table){
each(table.getElementsByTagName(“tr”), function(row,i){
if ( i % 2 == 1 )
dojo.html.addClass( row, “odd” );
});
});

*/

Protótipo (1.4.0):

/*
$A(document.getElementsByTagName(“table”)).each(function(table){
$A(table.getElementsByTagName(“tr”)).each(function(row,i){
if ( i % 2 == 1 )
Element.addClassName( row, “odd” );
});
});
*/

Protótipo (1.5.0):

/*
$$(“table”).each(function(table){
Selector.findChildElements(table, [“tr”])
.findAll(function(row,i){ return i % 2 == 1; })
.invoke(“addClassName”, “odd”);
});
*/

Protótipo 1.5.1:

/*
$$(‘tr:nth-child(odd)’).invoke(‘addClassName’, ‘odd’);
*/

Mochikit:

/*
var byTag = getElementsByTagAndClassName;

forEach( byTag(“table”), function(table) {
var rows = byTag( “tr”, null, table );
for ( var i = 1; i < rows.length; i += 2 )
addElementClass( rows[i], “odd” );
});
*/

Mootools:

/*
$$(“table”).each(function(table){
$ES(“tr”, table).each(function(row,i){
if ( i % 2 == 1 )
row.addClass( “odd” );
});
});
*/

jQuery:

/*
$(“tr:nth-child(odd)”).addClass(“odd”);
*/

AJS:

/*
AJS.map(AJS.$bytc(“table”), function(table) {
AJS.map(AJS.$bytc(“tr”, null, table), function(row, i) {
if ( i % 2 == 1 && !/(^|s)odd(s|$)/.test( row.className ) )
AJS.setClass( row, “odd” );
});
*/

É sempre importante conhecer novos frameworks, libs, etc. E opções de utilização. Coisas que ainda estou no início, mas na web 2.0 já são consideradas maduras.

Um detalhe importante é que em volta de cada código inserido, foi feito o famoso “comentado de código“. Isso, porque, o wordpress sem estes comentários mostra um tipo de exception.

Abraço,
Ederson Melo

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s