SummArg | Cursos y recursos para webmasters

27/11/2010

Alternar colores por fila en una tabla y resaltar fila al pasar el mouse

Utilizando JavaScript podemos añadir estilo a una tabla de modo tal que su lectura sea mas sencilla. El primero de los métodos consiste en colocar colores de fondo distintos a las filas, pero sin tener que asignarlo manualmente a cada una.

Para lograr este estilo debemos insertar entre etiquetas <head> el siguinte código:

<script type="text/javascript">
function altRows(id){
 if(document.getElementsByTagName){ 
 var table = document.getElementById(id);  
 var rows = table.getElementsByTagName("tr");
 for(i = 0; i < rows.length; i++){        
 if(i % 2 == 0){
 rows[i].className = "evenrowcolor";
 }else{
 rows[i].className = "oddrowcolor";
 }      
 }
 }
}
window.onload=function(){
 altRows('alternatecolor');
}
</script>

Entre etiquetas <head> colocaremos el siguiente código, aunque también puede insertarse directamente en el .css removiendo las etiquetas <style>.

 <style type="text/css">
 table.altrowstable {
 font-family: verdana,arial,sans-serif;
 font-size:11px;
 color:#333333;
 border-width: 1px;
 border-color: #a9c6c9;
 border-collapse: collapse;
 }
 table.altrowstable th {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
 }
 table.altrowstable td {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
 }
 .oddrowcolor{
 background-color:#d4e3e5;
 }
 .evenrowcolor{
 background-color:#c3dde0;
 }
 </style>
 

El marcado en HTML de la tabla en cuestión deberá realizarse indicando unicamente el id de la tabla como se muestra a continuación:


<table class="altrowstable" id="alternatecolor">
 <tr>
 <th>Columna uno</th><th>Columna dos</th>
 </tr>
 <tr>
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr>
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr>
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr>
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr>
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 </table>

Un segundo recurso muy utilizado es el de resaltar la fila por donde pasamos el cursor (hover) cambiando el color de fondo. De este modo podemos facilitar la lectura de una tabla con muchos datos o simplemente mejorar el aspecto visual de la misma.

En la plantilla de estilo insertaremos:

 table.hovertable {
 font-family: verdana,arial,sans-serif;
 font-size:11px;
 color:#333333;
 border-width: 1px;
 border-color: #999999;
 border-collapse: collapse;
 }
 table.hovertable th {
 background-color:#c3dde0;
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
 }
 table.hovertable tr {
 background-color:#d4e3e5;
 }
 table.hovertable td {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
 }
 </style>

Y en el HTML:

<table class="hovertable">
 <tr>
 <th>Columna uno</th><th>Columna Dos</th>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
 <td>Texto texto</td><td>Texto texto</td>
 </tr>
 </table>

Podemos ver ambos ejemplos funcionando en Demo Tablas. Fuente Text-fixer

Dejar un comentario

  1. Hola yo mustro todos los datos de una BD con tablas y me gustaria poder hacer eso ! utilizo PHP

Dejar un comentario