Tablas mejoradas con Prototype
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í:
- <table id="products">
- <tr>
- <th>product</th>
- <th>price</th>
- </tr>
- <tr id="1">
- <td>mouse</td>
- <td>12.34</td>
- </tr>
- <tr id="2">
- <td>printer</td>
- <td>23.45</td>
- </tr>
- <tr id="3">
- <td>screen</td>
- <td>34.21</td>
- </tr>
- <tr id="4">
- <td>USB stick</td>
- <td>1.23</td>
- </tr>
- <tr id="5">
- <td>keyboard</td>
- <td>2.34</td>
- </tr>
- </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
- var ListTable = Class.create();
- ListTable.prototype = {
- initialize: function(tableId, path) {
- table = $(tableId);
- Element.addClassName(table, 'listTable');
- var odd = true;
- $A(table.getElementsByTagName('TR')).each(function(row){
- if(row.id !== ''){
- listRow = new ListRow(row, path, odd);
- odd = !odd;
- }
- });
- }
- };
- var ListRow = Class.create();
- ListRow.prototype = {
- initialize: function(row, path, odd) {
- this.row = row;
- this.path = path;
- if(odd) {
- this.addBehavior('ltOdd', 'ltOddOver');
- } else{
- this.addBehavior('ltEven', 'ltEvenOver');
- }
- },
- addBehavior: function(clazz, classOver) {
- Element.addClassName(this.row, clazz);
- this.classOver = classOver;
- this.row.onmouseover = this.handleOnMouseOver.bindAsEventListener(this);
- this.row.onmouseout = this.handleOnMouseOut.bindAsEventListener(this);
- this.row.onclick = this.handleOnClick.bindAsEventListener(this);
- },
- handleOnClick: function(event) {
- location.href = this.path + '?id=' + this.row.id;
- },
- handleOnMouseOver: function(event) {
- Element.addClassName(this.row, this.classOver);
- },
- handleOnMouseOut: function(event) {
- Element.removeClassName(this.row, this.classOver);
- }
- };
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
