El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre
Actualizaciones en varios CMS
Nos mudamos

Tablas mejoradas con Prototype

Alma Fernández 03/12/2006

Una forma interesante de darle un poco de vida a esas tablas que introducimos en nuestros sitios web para contener listados de, por ejemplo, productos. Con un poco de Prototype es francamente sencillo conseguir:

  • Alternar el color de las filas
  • Cambiar el color de fondo de la fila al pasar el ratón por encima
  • Al hacer click en una columna se abre una ventana con información sobre la misma

La tabla que queremos mejorar es algo así:

  1. <table id="products">
  2.  <tr>
  3.   <th>product</th>
  4.   <th>price</th>
  5.  </tr>
  6.  <tr id="1">
  7.   <td>mouse</td>
  8.   <td>12.34</td>
  9.  </tr>
  10.  <tr id="2">
  11.   <td>printer</td>
  12.   <td>23.45</td>
  13.  </tr>
  14.  <tr id="3">
  15.   <td>screen</td>
  16.   <td>34.21</td>
  17.  </tr>
  18.  <tr id="4">
  19.   <td>USB stick</td>
  20.   <td>1.23</td>
  21.  </tr>
  22.  <tr id="5">
  23.   <td>keyboard</td>
  24.   <td>2.34</td>
  25.  </tr>
  26. </table>

Ahora colocamos el siguiente código Javascript en un archivo a parte, así podremos reutilizarlo y no hacer demasiado pesada la página con la tabla

  1. var ListTable = Class.create();
  2. ListTable.prototype = {
  3.  initialize: function(tableId, path) {
  4.   table = $(tableId);
  5.   Element.addClassName(table, 'listTable');
  6.   var odd = true;
  7.   $A(table.getElementsByTagName('TR')).each(function(row){
  8.    if(row.id !== ''){
  9.     listRow = new ListRow(row, path, odd);
  10.     odd = !odd;
  11.    }
  12.   });
  13.  }
  14. };
  15.  
  16. var ListRow = Class.create();
  17. ListRow.prototype = {
  18.  initialize: function(row, path, odd) {
  19.   this.row = row;
  20.   this.path = path;
  21.   if(odd) {
  22.    this.addBehavior('ltOdd', 'ltOddOver');
  23.   } else{
  24.    this.addBehavior('ltEven', 'ltEvenOver');
  25.   }
  26.  },
  27.  addBehavior: function(clazz, classOver) {
  28.   Element.addClassName(this.row, clazz);
  29.   this.classOver = classOver;
  30.   this.row.onmouseover = this.handleOnMouseOver.bindAsEventListener(this);
  31.   this.row.onmouseout = this.handleOnMouseOut.bindAsEventListener(this);
  32.   this.row.onclick = this.handleOnClick.bindAsEventListener(this);
  33.  },
  34.  handleOnClick: function(event) {
  35.   location.href = this.path + '?id=' + this.row.id;
  36.  },
  37.  handleOnMouseOver: function(event) {
  38.   Element.addClassName(this.row, this.classOver);
  39.  },
  40.  handleOnMouseOut: function(event) {
  41.   Element.removeClassName(this.row, this.classOver);
  42.  }
  43. };

Añades el archivo prototype.js al directorio del javascript y listo.

Toda la explicación del «truco» en el artículo original, con un ejemplo para descargar de regalo: Enhance list tables with Prototype Javascript Framework

Javascript, Librerias

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 2 años. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández