En al siguente ejemplo vamos a cambiar el aspecto y comportamiento de una tabla HTML básica utilizanzo TableSorter, CSS y JavaScript.
Vamos a mejorar la tabla HTML básica en los siguientes aspectos:
– Posibilidad de ordenar los datos, incluso por fechas.
– Alternar los colores de cada fila.
– Hacer que cambie el cursor cuando pasamos por encima de una fila.
– Hacer que cambie el color de la fila al pasar con el cursor por encima.
– Modificación de las imágenes de la cabecera en función del tipo de ordenación.
Algunas de estas mejoras las proporciona la librería TableSorter y otras están basadas en CSS y JavaScript (JQuery).
TableSorter ofrece muchas más posibilidades de personalización de las tablas HTML, para ver todas las posibilidades consultar su página web.
Ficheros Necesarios:
– arrow_down.png (Imagen cabecera orden descendente)
– arrow_off.png (Imagen cabecera sin orden)
– arrow_up.png (Imagen cabecera orden ascendente)
– jquery-1.3.js
– jquery.tablesorter.min.js
– tableSorter.html (Contiene el código del ejemplo)
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo TableSorter</TITLE>
<!– DEFINIMOS EL ESTILO DE LA TABLA–>
<style type=”text/css”>
body {
color: white;
background-color: #808080;
font-family:arial;
}
table.tablesorter{
border-width: 1px;
border-style: outset;
width:100%;
color:white;
}
/*CONFIGURA LA CABECERA PONE LAS IMAGENES DE LAS FLECHAS*/
table.tablesorter thead th.ordenable{
background-color:black;
background-image: url(arrow_off.png);
cursor: pointer;
background-repeat: no-repeat;
background-position: 97% 50%;
color: white;
}
/*IMAGEN DE LAS FLECHAS ORDEN ASCENDENTE*/
table.tablesorter thead th.ordenableAsc{
background-image: url(arrow_up.png);
}
/*IMAGEN DE LAS FLECASH ORDEN DESCENDENTE*/
table.tablesorter thead th.ordenableDesc{
background-image: url(arrow_down.png);
}
/*COLOR PARA LAS FILAS ODD Y PARA QUE SALGA LA MANO*/
table.tablesorter tbody tr.odd td{
background-color:black;
cursor: pointer;
}
/*COLOR PARA LAS FILAS EVEN Y PARA QUE SALGA LA MANO*/
table.tablesorter tbody tr.even td{
background-color:green;
cursor: pointer;
}
</style>
<!– FIN DEFINIMOS EL ESTILO DE LA TABLA–>
<!– JAVASCRIPT–>
<script type=”text/javascript” src=”jquery-1.3.js”></script>
<script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
//CONFIGURAMOS LOS CSS DE LA CABECERA
//PARA QUE PINTE LAS FLECHAS CORRESPONDIENTES
//A LA ORDENACION
//AÑADIMOS EL WIDGET ‘ZEBRA’ PARA QUE PINTE
//lAS FILAS DE COLOR ALTERNO
$(’#tabla_css_tablesorter_highlight’).tablesorter(
{
cssHeader: “ordenable”,
cssDesc:”ordenableAsc”,
cssAsc:”ordenableDesc”,
widgets: [‘zebra’]
}
);
//PARA QUE RESALTE LA FILA SELECCIONADA DE NARANJA
//MODIFICAMOS LOS EVENTOS MOUSEOVER Y MOUSEOUT
//Y PARA CADA CELDA DE CADA FILA LE ASIGNAMOS
//EL VALOR QUE LE CORRESPONDA
$(’#tabla_css_tablesorter_highlight td’).each(function() {
$(this).mouseover(function(){
filaJQ = $(this).parent().get(0).cells;
$(filaJQ).each(function () {
$(this).css(”background-color”, “orange”);
});
}).mouseout(function(){
filaJQ = $(this).parent().get(0).cells;
$(filaJQ).each(function () {
$(this).css(”background-color”, “”);
});
})
})
}
);
</script>
<!–FIN JAVASCRIPT–>
</HEAD>
<BODY >
<H1>Tablas HTML</H1>
<BR>
<H3>Tabla HTML Básica + Css + TableSorter + HighLight</H3>
<!– LA TABLA TIENE QUE TENER ESTA ESTRUCTURA–>
<!– MUY IMPORTANTE PONERLE EL ID SI NO TABLESORTER NO FUNCIONA–>
<TABLE id=”tabla_css_tablesorter_highlight” class=”tablesorter”>
<THEAD>
<TR>
<TH>Id Usuario</TH>
<TH>Fecha Alta</TH>
<TH>Nick</TH>
<TH>Perfil</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<td id=”001″>001</TD>
<td>March 17, 2009 4:16 PM</TD>
<td>usu1</TD>
<td>Senior</TD>
</TR>
<TR>
<TD>007</TD>
<TD>January 8, 2010 2:23 PM</TD>
<TD>usu5</TD>
<TD>Junior</TD>
</TR>
<TR>
<TD>003</TD>
<TD>December 3, 2009 5:54 PM</TD>
<TD>usu9</TD>
<TD>Master</TD>
</TR>
<TR>
<TD>009</TD>
<TD>December 25, 2009 9:24 AM</TD>
<TD>usu3</TD>
<TD>Junior</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>