Olvida eso de los cambios que hice para optimizarlo, si lo hubieras visto el mismo día que lo publiqué y al día siguiente hubieras visto el pequeño cambio, en realidad no tiene importancia.
En primer lugar el modo de uso. Nada, solo tienes que hacer una tabla y darle ese Id y funciona.
El efecto horizontal se hace simplemente con hoja de estilos, de este modo:
Código:
#miTabla tr:hover td {
background-color: #FFA500;
}
Si no entiendes este simple código te diré que en primer lugar aprendas CSS y en segundo lugar pues que el selector selecciona (valga la redundancia) todos los elementos TD contenidos dentro de todos los elementos TR sobre el cual esté encima el mouse y que estén contenidos dentro de la tabla cuyo Id es miTabla.
Para el efecto vertical me valgo de otras funciones auxiliares. Creo en primer lugar la función get, la cual simplemente devuelve la referencia del elemento cuyo id se pase como parámetro. También he creado la función getObj a la cual si se le pasa un id devuelve el objeto de referencia del elemento que tenga ese id y si se le pase un objeto de referencia devuelve el mismo objeto. Esta función me sirve para usarlo en este caso en la función gtn, la cual devuelve el array de elementos que tengan el tag name que se pasa como segundo parámetro y que estén contenidos dentro del objeto o el objeto de referencia del id que se pase como primer parámetro, por eso uso getObj, porque el primer parámetro puede ser un id o un objeto de referencia.
También me valgo de una función que encontré por ahí el cual sirve para asignar un evento a un elemento, la función listen. Tanto en I.E. como en Firefox y el resto funcionan de diferente manera. Internet Explorer usa attachEvent y los demás usan addEventListener, la función listen pretende unificar ambas funciones.
Ahora explico el procedimiento:
Código:
var tds;
var nc;
window.onload = function() {
var idTabla = 'miTabla';
nc = get(idTabla).rows[0].cells.length;
tds = gtn(idTabla, 'td');
for (var i = 0; i < tds.length; i ++) {
listen('mouseover', tds[i], overTD);
listen('mouseout', tds[i], outTD);
}
}
Aquí defino primero dos variables globales, la primera contendrá el array de las referencias de todos los TDs de la tabla, el segundo, el número de columnas de la tabla.
Ok, cuando la página carga, o sea en window.onload = definimos una función, lo primero que se hace es obtener el número de columnas, mediante esta expresión:
nc = get(idTabla).rows[0].cells.length;
get(idTabla) obviamente referencia a la tabla, su propiedad rows nos da todas las referencias de las filas, solamente tomo la primera y de ella obtengo todas sus celdas mediante su propiedad cells, esto sería un array que contiene las referencias a la primera fila, su propiedad length nos da el número de celdas de esa primera fila, normalmente eso sería el número de columnas de la tabla. Obviamente eso no funcionaría si la primera fila de la tabla es un título que abarca todo el ancho de la tabla, o sea, si se usa un rowspan. Para ese caso se tendría que usar otra fila.
Bueno, ahora mediante esta expresión: tds = gtn(idTabla, 'td'); obtengo todas las referecias de los TDs o celdas contenidas en la tabla. Bien, a continuación recorro mediante un for todas las referencias de los TDs y a cada una le asigno dos eventos, al primer evento, a onmouseover (aunque el parámetro solo sea mouseover se le está asignando el evento onmouseover al elemento, igual para onmouseout) le asigno la función overTD, y al evento onmouseout la función outTD. Talvez sea demás decir que el evento onmouseover dispara la acción cuando el cursor entra sobre el elemento y lo contrario para onmouseout.
Bueno, ahora debo decir que cuando se adjunta un evento a un elemento, en este caso con la función listen (o sea mediante addEventListener en el estándar y mediante attachEvent en Internet Explorer) la función que se ejecuta recibe como único parámetro el objeto event.
Bien, en la función overTD obtengo el elemento sobre el cual se ha disparado el evento, eso lo hago mediante srcElement para I.E. y mediante target en el estándar. Ahora mediante esta expresión: var col = obj.cellIndex; obtengo el número de la columna sobre la que se encuentra el elemento. Es decir, si está en la primera columna col será igual a 0, si está en la segunda col será 1 y así sucesivamente.
Sabiendo el número de columna sobre el que se encuentra el elemento sobre el cual está el cursor, el número de celdas de la tabla y el número de columnas pues ya casi tengo la solución: tengo que recorrer nomás las celdas de dicha columna. Esto lo hago mediante el for:
Código:
for (var i = col; i < tds.length; i += nc) {
tds[i].className = 'sombra';
}
Este for arranca desde el valor de col el cual me da la posición de la columna sobre el cual está el cursor, este sería el primer elemento que está sobre esa columna, para obtener el segundo elemento que está sobre esta columna tengo que sumarle el número de columnas de la tabla, claro! si la tabla tiene 3 columanas y estoy sobre la segunda columna, col es igual a 1, en este caso el primer elemento de la tabla que está sobre la segunda columna está referenciado mediante tds[1], para obtener al segundo tengo que sumarle tres (número de columnas de la tabla), así obtengo el elemento referenciado mediante tds[4] y así voy sumando 3 cada vez para obtener el siguiente elemento sobre esta columna.
Este for:
for (var i = col; i < tds.length; i += nc) {
va desde ese primer elemento de la columna y no sobrepasa el número de celdas de la tabla, y avanza no de uno en uno, sino de nc en nc, donde nc es igual al número de columnas de la tabla, por eso recorre toda la columna. Por ejemplo si el número de columnas es 3, y estoy sobre la sugunda columna, col sería igual a 1, entonces los valores de i dentro del for serían: 1, 4, 7, ... y así sucevamente, pero está limitado por el número de celdas de la tabla. Así obtengo las pocisiones de los elementos de la columna sobre la cual está el cursor dentro del array tds.
Ok, a todos esos elementos les doy una clase: sombra. Esa clase define un color de fondo, y ya está, sombreamos toda la columna. la función outTD hace lo contrario, les quita esa clase a todos los elementos de la columna sobre la cual el cursor ha salido, de este modo le quitamos el color de fondo.
Bien, eso sería todo, creo que ha sido una explicación algo extensa y seguro en algunos momentos redundantes, pero quería que entiendan sobre todo la lógica del for que permite seleccionar todos los elementos de una columna.
Espero que hayan entendido mis explicaciones.