Efecto para resaltar las filas de tus tablas

En distintos sitios web habrás visto en las tablas que al pasar el ratón por encima de una fila, toda la fila se remarca.  Gracias a Dhtml Goddies podrás crear una tabla con ese efecto y, también, con la posibilidad de que al hacer clic cobre una de las filas esta quede remarcada permanentemente.

Puedes ver una demostración del resultado final aquí. Como habrás observado allí se cambian tanto el color de fondo de la fila como el de la letra. En realidad puedes modificar cualquier atributo que permita CSS. Por ejemplo es posible agregar subrayado o cambiar la fuente.

Para hacerlo sencillamente debes definir los estilos CSS de tu tabla normalmente y además definir dos estilos más con los nombres que desees. Uno para el efecto al pasar con el mouse sobre una fila y otro para cuando se hace clic. Por ejemplo:

.tableRollOverEffect{
/*Efecto cuando el mouse pasa por encima*/
background-color:#317082;
color:#FFF;
}
.tableRowClickEffect{
/*Efecto cuando se ha realizado clic*/
background-color:#F00;
color:#FFF;
}

Cuando realizas el código HTML de tu tabla es importante que le asignes un id de la siguiente forma

<table id="myTable">.

En la sección head de tu página debes agregar el siguiente código, o bien puedes guardarlo en un archivo js y luego enlazarlo.

<script type="text/javascript">
/*************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
*************************************************************************/    var arrayOfRolloverClasses = new Array();
var arrayOfClickClasses = new Array();
var activeRow = false;
var activeRowClickArray = new Array();
function highlightTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!=’TABLE’)tableObj = tableObj.parentNode;
if(this!=activeRow){
this.setAttribute(’origCl’,this.className);
this.origCl = this.className;
}
this.className = arrayOfRolloverClasses[tableObj.id];
activeRow = this;
}
function clickOnTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!=’TABLE’)tableObj = tableObj.parentNode;

if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className=”;
}
this.className = arrayOfClickClasses[tableObj.id];
activeRowClickArray[tableObj.id] = this;

}
function resetRowStyle()
{
var tableObj = this.parentNode;
if(tableObj.tagName!=’TABLE’)tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
return;
}
var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;
}

function addTableRolloverEffect(tableId,whichClass,whichClassOnClick)
{
arrayOfRolloverClasses[tableId] = whichClass;
arrayOfClickClasses[tableId] = whichClassOnClick;
var tableObj = document.getElementById(tableId);
var tBody = tableObj.getElementsByTagName(’TBODY’);
if(tBody){
var rows = tBody[0].getElementsByTagName(’TR’);
}else{
var rows = tableObj.getElementsByTagName('TR');
}
for(var no=0;no<rows.length;no++){
rows[no].onmouseover = highlightTableRow;
rows[no].onmouseout = resetRowStyle;

if(whichClassOnClick){
rows[no].onclick = clickOnTableRow;
}
}
}
</script>+

Por último tan solo deberás utilizar la siguiente línea para dar todo por terminado.

addTableRolloverEffect('myTable','tableRollOverEffect','tableRowClickEffect');

Donde myTable es el id de la tabla y tableRollOverEffect junto a tableRowClickEffect son los estilos a utilizarse.

Y con este poco trabajo ya tendrás el efecto creado y podras utilizarlo en todas las tablas que desees.

Fuente: DHtml Goodies