*: este funciona mejor

function colorFila(fila) {
fila.bgColor='#FFFFFF';
fila.style.cursor="hand";
}

function colorFila2(fila,check) {
boton = eval("document.getElementById("+chek+").checked");
if (!boton){
fila.bgColor='#F0F0F0';
}
fila.style.cursor="hand";
}

La primera funcion la llamo con OnMouseOver y la segunda con OnMouseOut. Así dejo resaltadas
las filas que selecciono!

En el tr llevaría esto (embebido en PHP):

<tr bgcolor='#F0F0F0' onMouseOver='colorFila(this)' onMouseOut='colorFila2(this,$codigo)'>

n, la idea es resaltar(aplicar una regla de estilo CSS) toda una fila de una tabla al situar el
mouse en dicha fila, tal y como se puede apreciar en la figura del costado.

La regla CSS a aplicar en nuestro ejemplo se llamará: resaltar, cuyo código es el siguiente:

view plaincopy to clipboardprint?

1. tr.resaltar {
2. background-color: #F5FFD7;
3. cursor: pointer;
4. }

Veamos brevemente lo que contiene nuestra regla CSS. Primeramente con tr. estamos
diciendo que solo es aplicable a las filas(<tr>)de una tabla. La propiedad background-color
establece como color de fondo de la fila al valor hexadecimal #F5FFD7 (parecido al verde
agua). Finalmente la propiedad cursor: pointer indica que el cursor se tiene que cambiar por
la del icono de la manito.

Bueno, La forma clásica y usual de hacer el RESALTE es colocando manualmente en el

evento onmouseover de la fila(<tr>) el estilo css que deseamos que obtenga al situarnos
encima de dicha fila y en el evento onmouseout donde indicaremos que no se aplicará
regla css alguna cuando el puntero del mouse salga de la fila. El Código sería el siguiente:

view plaincopy to clipboardprint?

1. <tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null"

>
2. <td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;amp;oac
ute;n</td>
3. </tr>
4. <tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null"
>
5. <td>Per&amp;amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td
>
6. </tr>

Esto es aceptable siempre y cuando la tabla conste de pocas filas, pero ¿Qué sucedería si la
tabla consta de 20, 500 ó 1000 e incluso más filas?, ¿demasiado tedioso verdad?, pues la
idóneo,en estos casos, es utilizar DHTML (HTML Dinámico) para hacerlo realidad con tan
solo unas cuantas líneas de código.

¿Qué es DHTML?

DHTML (HTML Dinámico): No es un lenguaje de programacion nuevo; es más bien el

uso combinado de HTML, Hojas de estilos CSS y JavaScript que me permitirá,luego de
cargada la página, acceder a cada una de las etiquetas html y poder modificar sus atributos.
Para aplicar DHTML necesitamos obligatoriamente conocer el DOM (Document Object
Model).

¿Qué es DOM?

DOM (Document Object Model): Es el Modelo en Objetos para la representación de

Documentos, es sobretodo otra forma de ver el contenido HTML de una Página Web. Este
modelo es altamente gerarquizado y a través de él podemos acceder al contenido y estilo de
cada etiqueta html del documento y modificarla de acuerdo a algún evento. DOM permite
entonces insertar, borrar o modificar las etiquetas HTML y sobretodo sin recargar la
pagína.

Pues bien, luego de estos conocimeintos previos ya podemos realizar la función JavaScript
que permitirá realizar el resalte del manera rápida. El Código necesario es el siguiente:
view plaincopy to clipboardprint?

1. function ResaltarFila(id_tabla){
2. if (id_tabla == undefined) // si no se le pasa parametro
3. // recupera todas las filas de todas las tablas
4. var filas = document.getElementsByTagName("tr");
5. else{
6. // recupera todas las filas de la tabla indicada en el parametro
7. var tabla = document.getElementById(id_tabla);
8. var filas = tabla.getElementsByTagName("tr");
9. }
10. // recorre cada una de las filas
11. for(var i in filas) {
12. // si el puntero esta encima de la fila asigna la regla css: resaltar
13. filas[i].onmouseover = function() {
14. this.className = "resaltar";
15. }
16. // si el puntero salga de la fila asigna ninguna regla
17. filas[i].onmouseout = function() {
18. this.className = null;
19. }
20. }
21. }

Línea 04, Se utiliza la función: getElementsByTagName que provee DOM a través del
objeto document retornando la referencia a todas las etiquetas(TagName) <tr>(filas de una
tabla).

Línea 07: Si es que le he pasado el nombre de la tabla, recupera la referencia a la tabla cuyo
nombre(id) sea igual al parámetro id_tabla mediante la función getElementsById y lo
almcaenda en la variable tabla.

Linea 08: a diferencia de la línea 04 se almacena en la variable fila todas las referencia de
todas las filas pero tan solo de la tabla almacenada en la variable tabla.

Linea 13,14: Agrega a la fila actual,observen que con el for de la linea 11 se recorre una a
una las filas, el evento onmouseover e indica que cuando suceda esto le asigne a la fila la
regla de estilo CSS llamada “resaltar“(this.className =”resaltar”;).

Línea 17,18: Agrega a la fila actual el evento onmouseout e indica que cuando suceda esto
le asigne a la fila ninguna regla de estilo CSS (this.className =”null”;)”.

Listo!!!, eso es todo, lo que nos queda es llamar a la función luego que la carga de pagina
haya sido completada (importante). el código sería el siguiente:

view plaincopy to clipboardprint?

 1. // resaltar fila de tabla cuyo nombre sea tabla_paises
2. ResaltarFila('tabla_paises');
3. // si queremos resaltar todas las tablas,
4. // no le pasamos parametro
5. ResaltarFila();

Les dejo ahora todo el codigo perteniente al archivo: resalta_fila.html.

view plaincopy to clipboardprint?

1. <html>
2. <head>
3. <title>Resaltar fila de una Tabla al pasar el Mouse</title>
4. <script language="JavaScript" type="text/javascript">
5. function ResaltarFila(id_tabla){
6. if (id_tabla == undefined) // si no se le pasa parametro
7. // recupera todas las filas de todas las tablas
8. var filas = document.getElementsByTagName("tr");
9. else{
10. // recupera todas las filas de la tabla indicada en el parametro
11. var tabla = document.getElementById(id_tabla);
12. var filas = tabla.getElementsByTagName("tr");
13. }
14. // recorre cada una de las filas
15. for(var i in filas) {
16. // cuando el puntero esta encima de la fila asigna la regla css: resaltar
17. filas[i].onmouseover = function() {
18. this.className = "resaltar";
19. }
20. // cuando el puntero salga de la fila asigna ninguna regla
21. filas[i].onmouseout = function() {
22. this.className = null;
23. }
24. }
25. }
26. </script>
27. <style type="text/css">
28. tr.resaltar {
29. background-color: #F5FFD7;
30. cursor: pointer;
31. }
32. </style>
33. </head>
34.
35. <body>
36. <table id="tabla_paises">
37. <caption>Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;ses Sudamericanos</ca
ption>
38. <tr>
39. <th width="180">Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;s</th>
40. <th width="120">Capital</th>
41. </tr>
42. <tr><td>Argentina</td><td>Buenos Aires</td></tr>
43. <tr><td>Bolivia</td><td>La Paz</td></tr>
44. <tr><td>Brasil</td><td>Brasilia</td></tr>
45. <tr><td>Chile</td><td>Santiago de Chile</td></tr>
46. <tr><td>Colombia</td><td>Bogot&amp;amp;amp;amp;amp;amp;amp;amp;aacute;
</td></tr>
47. <tr><td>Ecuador</td><td>Quito</td></tr>
48. <tr><td>Guyana</td><td>Georgetown</td></tr>
49. <tr><td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;oacute
;n</td></tr>
50. <tr><td>Per&amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td><
/tr>
51. <tr><td>Surinam</td><td>Paramaribo</td></tr>
52. <tr><td>Trinidad y Tobago</td><td>Puerto Espa&amp;amp;amp;amp;amp;amp;a
mp;amp;ntilde;a</td></tr>
53. <tr><td>Uruguay</td><td>Montevideo</td></tr>
54. <tr><td>Venezuela</td><td>Caracas</td></tr>
55. </table>
56. <br /><br />
57.
58. <table id="tabla_libros">
59. <caption>Libros Programación</caption>
60. <tr>
61. <th width="220">Nombre</th>
62. <th width="80">P&amp;amp;amp;amp;amp;amp;amp;amp;aacute;ginas</th>
63. </tr>
64. <tr><td>PHP</td><td>650</td></tr>
65. <tr><td>JavaScrip</td><td>420</td></tr>
66. <tr><td>CSS</td><td>345</td></tr>
67. </table>
68.
69. <script language="JavaScript" type="text/javascript">
70. // resaltar fila de tabla cuyo nombre sea tabla_paises
71. ResaltarFila('tabla_paises');
72. // si queremos resaltar todas las tablas,
73. // no le pasamos parametro
74. ResaltarFila();
75. </script>
76. </body>
77. </html>
Bueno yo recomiendo tener el código Javascript en un archivo aparte, el Código CSS
también en un archivo aparte para luego hacer en nuestro archivo html la llamada a esos
archivos, esto permite generar codigo más limpio y entendible. En la demo he aplicado
esto.

Ver Demo Online | Descargar Código Fuente

Biliografía : DHTML Ya, DOM