Fuente : http://www.codigocaxa.net78.net/?p=13
Pues bien, 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:
tr.resaltar {
background-color: #F5FFD7;
cursor: pointer;
}
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:
<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
<td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td>
</tr>
<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
<td>Per&amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td>
</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:
function ResaltarFila(id_tabla){
if (id_tabla == undefined) // si no se le pasa parametro
// recupera todas las filas de todas las tablas
var filas = document.getElementsByTagName("tr");
else{
// recupera todas las filas de la tabla indicada en el parametro
var tabla = document.getElementById(id_tabla);
var filas = tabla.getElementsByTagName("tr");
}
// recorre cada una de las filas
for(var i in filas) {
// si el puntero esta encima de la fila asigna la regla css: resaltar
filas[i].onmouseover = function() {
this.className = "resaltar";
}
// si el puntero salga de la fila asigna ninguna regla
filas[i].onmouseout = function() {
this.className = null;
}
}
}
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:
// resaltar fila de tabla cuyo nombre sea tabla_paises
ResaltarFila('tabla_paises');
// si queremos resaltar todas las tablas,
// no le pasamos parametro
ResaltarFila();
Les dejo ahora todo el codigo perteniente al archivo: resalta_fila.html.
<html>
<head>
<title>Resaltar fila de una Tabla al pasar el Mouse</title>
<script language="JavaScript" type="text/javascript">
function ResaltarFila(id_tabla){
if (id_tabla == undefined) // si no se le pasa parametro
// recupera todas las filas de todas las tablas
var filas = document.getElementsByTagName("tr");
else{
// recupera todas las filas de la tabla indicada en el parametro
var tabla = document.getElementById(id_tabla);
var filas = tabla.getElementsByTagName("tr");
}
// recorre cada una de las filas
for(var i in filas) {
// cuando el puntero esta encima de la fila asigna la regla css: resaltar
filas[i].onmouseover = function() {
this.className = "resaltar";
}
// cuando el puntero salga de la fila asigna ninguna regla
filas[i].onmouseout = function() {
this.className = null;
}
}
}
</script>
<style type="text/css">
tr.resaltar {
background-color: #F5FFD7;
cursor: pointer;
}
</style>
</head>
<body>
<table id="tabla_paises">
<caption>Pa&amp;amp;amp;amp;amp;amp;amp;iacute;ses Sudamericanos</caption>
<tr>
<th width="180">Pa&amp;amp;amp;amp;amp;amp;amp;iacute;s</th>
<th width="120">Capital</th>
</tr>
<tr><td>Argentina</td><td>Buenos Aires</td></tr>
<tr><td>Bolivia</td><td>La Paz</td></tr>
<tr><td>Brasil</td><td>Brasilia</td></tr>
<tr><td>Chile</td><td>Santiago de Chile</td></tr>
<tr><td>Colombia</td><td>Bogot&amp;amp;amp;amp;amp;amp;amp;aacute;</td></tr>
<tr><td>Ecuador</td><td>Quito</td></tr>
<tr><td>Guyana</td><td>Georgetown</td></tr>
<tr><td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;oacute;n</td></tr>
<tr><td>Per&amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td></tr>
<tr><td>Surinam</td><td>Paramaribo</td></tr>
<tr><td>Trinidad y Tobago</td><td>Puerto Espa&amp;amp;amp;amp;amp;amp;amp;ntilde;a</td></tr>
<tr><td>Uruguay</td><td>Montevideo</td></tr>
<tr><td>Venezuela</td><td>Caracas</td></tr>
</table>
<br /><br />
<table id="tabla_libros">
<caption>Libros Programación</caption>
<tr>
<th width="220">Nombre</th>
<th width="80">P&amp;amp;amp;amp;amp;amp;amp;aacute;ginas</th>
</tr>
<tr><td>PHP</td><td>650</td></tr>
<tr><td>JavaScrip</td><td>420</td></tr>
<tr><td>CSS</td><td>345</td></tr>
</table>
<script language="JavaScript" type="text/javascript">
// resaltar fila de tabla cuyo nombre sea tabla_paises
ResaltarFila('tabla_paises');
// si queremos resaltar todas las tablas,
// no le pasamos parametro
ResaltarFila();
</script>
</body>
</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
.
www.coudlain.com 