Zebra

Lo prometido es deuda, un ejemplo de como usar la notación JSON y la función addEvent para algo útil.

El grueso del script lo compone el objeto ZebraTable que haciendo uso de la función abreviatura $(), que es lo mismo que document.getElementById(), y de la función addEvent es capaz de rayar una tabla html, dándole un aspecto realmente profesional.

var ZebraTable = {
 bgcolor: '',
 classname: '',
 stripe: function(el) {
  if (!$(el)) return;
  var rows = $(el).getElementsByTagName('tr');
  for (var i=1,len=rows.length;i < len;i++) {
   if (i % 2 == 0) rows[i].className = 'alt';
   Event.add(rows[i],'mouseover',function()
     { ZebraTable.mouseover(this); });
   Event.add(rows[i],'mouseout',function()
     { ZebraTable.mouseout(this); });
  }
 },
 mouseover: function(row) {
  this.bgcolor = row.style.backgroundColor;
  this.classname = row.className;
  row.className = 'over';
 },
 mouseout: function(row) {
  row.className = this.classname;
  row.style.backgroundColor = this.bgcolor;
 }
}

Lo que hace este objeto JSON es recorrer todas las filas del objeto tabla e ir asignandoles un estilo determinado dependiendo de si el indice de la fila es par o impar. A su vez asocia a cada fila dos funciones para dos eventos. Para el evento onmouseover le asocia la función ZebraTable.mouseover, encargada de resaltar la fila por la que pasamos el puntero del ratón. Para el evento onmouseout le asocia la función ZebraTable.mouseout, que devuelve a cada fila el estilo que tuviera.

Para asociar los eventos utilizá otro objeto JSON, Event. Event tiene dos métodos, que se encargan de ligar/desligar las funciones a los eventos. Es algo parecido a la función addEvent que os he comentado estos últimos dias, pero más eficiente. Además ambas funciones estan encapsuladas en el objeto Event.

OO power!