tablas animadas

evangelino.anton · #1 (**permalink**) 18/03/2010, 06:09

Buenos días,

Escribo este post para pedir vuestra ayuda. Me gustaría hacer unas tablas animadas como hay en esta página https://www.cdmon.com/cas/alojamiento/compara_web.php

¿Cómo puedo hacerlo? ¿Hay alguna librería? ¿Algún ejemplo?

Muchas gracias,
Lino

dohko7 · #2 (**permalink**) 19/03/2010, 13:01

eh?? vi la pagina!! bastante interesante!! seria bueno que le pusieran interes pues seria buena adquisicion de informacion!

lastimosamente me fui por inocente a ver el codigo fuente y no me ayudo en nada xD

solo escribo para ver si motivo a alguien que tenga mas informacion! sorry

es decir!!! a mi tambien me ustaria saber como animar esas tablas!!

granvia86 · #3 (**permalink**) 19/03/2010, 16:20

Buenas,

Yo también estoy interesado en algo como el ejemplo de lino o sino alguna forma de animarlas, no tiene que ser de la misma forma....

Graciassss

ElJavista · #4 (**permalink**) 19/03/2010, 22:14

Lo acabo de resolver, aquí está el ejemplo de como hacerlo.

Código:

<html>
<head>

<style type="text/css">
	.sombra {
		background-color: #FFE4AF;
	}
	#miTabla tr:hover td {
		background-color: #FFA500;
	}
</style>

<script type="text/javascript">

function get(id) {
   return document.getElementById(id);
}
function getObj(obj) {
   if (typeof obj == 'string') obj = get(obj);
   return obj;
}

function gtn(obj, tag) {
   return getObj(obj).getElementsByTagName(tag);
}

function listen(event, elem, func) {
    elem = getObj(elem);
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(event,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+event, func);
	return r;
    }
    else throw 'No es posible añadir evento';
}

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);
	}
}

function isIE() {
	var nav = navigator.appName
	if (nav == 'Microsoft Internet Explorer') return true;
	else return false;
}

function overTD(evt) {
	if (isIE()) obj = evt.srcElement;
	else obj = evt.target;

	var col = obj.cellIndex;
	for (var i = col; i < tds.length; i += nc) {
	    tds[i].className = 'sombra'; 
	}
}
function outTD(evt) {
	if (isIE()) obj = evt.srcElement;
	else obj = evt.target;

	var col = obj.cellIndex;

	for (var i = col; i < tds.length; i += nc) {
	    tds[i].className = ''; 
	}
}
</script>
</head>

<body>

<table id="miTabla">
  <tr>
     <td>11</td> <td>12</td> <td> 13</td>
  </tr>
  <tr>
     <td>21</td> <td>22</td> <td> 23</td>
  </tr>
  <tr>
     <td>31</td> <td>32</td> <td> 33</td>
  </tr>
</table>

</body>
</html>

Lo he modificado un poco para optimizarlo. Espero que les sirva.

dohko7 · #5 (**permalink**) 22/03/2010, 06:53

mmm entiendo un poco pero no mucho!! podrias desglosar un poco y el modo de uso!!!

disculpa si mi pregunta tiende a ofender!!

ahh y podrias explicar que modificaste??

yo supongo que la cuestion no es tener el codigo funcionar! si no aprender algo nuevo a travez de ustedes!! es mi opinion!!

ElJavista · #6 (**permalink**) 22/03/2010, 08:47

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.

ElJavista · #7 (**permalink**) 24/03/2010, 19:45

No sé si mi explicación les traumó a todos los interesados en este efecto o qué, porque no dijeron si entendieron, ni si les sirvió, ni nada. Lo que si tengo que decir yo, que este efecto es puro JavaScript, no es Ajax, así que deberían pasarlo a su sección correspondiente.

dohko7 · #8 (**permalink**) 25/03/2010, 06:58

en efecto!!! si entndi! aunque te soy sincero no lei todo!!

a pesar que guarde el codigo para una posterior utilizacion! no lo e podido aplicar a mi proyecto por que las tablas que muestro estan cdodificadas a mostrarse dentro de un codigo puero de php!

para que este efecto me funcione tendria que migrarlo poco a poco y (para mucho esto es feo pero ya lo e echo), mezclar javaScript con php!!

nose si me explico pero pongo un codigo ejemplo de esas tablas:

Código PHP:

Ver originalecho "<table width='100%' cellpadding='1' cellspacing='1' style='border:1px  solid #045FB4;' border='3' align='center'>
         
                <tr><th align='center'><span STYLE='color:#3481CA; font-size: 13px' aling='center'>nombre </th>
                <th><span STYLE='color:#3481CA; font-size: 13px' aling='center'> ". $nombre. "</th>
            
                <tr><th align='canter'><span STYLE='color:#3481CA; font-size: 13px' aling='center'>apellido </th>
                <th><span STYLE='color:#3481CA; font-size: 13px' aling='center'> ". $apellido . "</th>
                
                <tr><th align='canter'><span STYLE='color:#3481CA; font-size: 13px' aling='center'>edad </th>
                <th><span STYLE='color:#3481CA; font-size: 13px' aling='center'> ". $edad . "</th>";
        echo "</table> </br>";

por eso no e comentado tu publicacion!!
pero Sip!! si funciona y te explicaste bien!

Gracias xD

ElJavista · #9 (**permalink**) 25/03/2010, 14:47

Solo tienes que darle el id correspondiente, si estás usando el código como está tienes que ponerle id="miTabla" y ya está.

dohko7 · #10 (**permalink**) 26/03/2010, 14:32

eso hice!!!!
pero como te dije la tabla esta dentro del codigo php!!!
no se si estoy equivocado pero a mi no me lo detecta!!!
el id de la tabla!!
lei tu explicacion y entendi, al codigo debo decirle el id del elemento a añadirse ese script.
pero nop!!! en php no me ve el elemento como tal a menos que pase el script pa dentro de php!!!

ElJavista · #11 (**permalink**) 27/03/2010, 07:34

No tiene nada que ver si la tabla se imprime con PHP o no, al fin y al cabo que todo ese efecto se ejecuta en el cliente, es indifernete si se imprime con PHP o solo con HTML, el cliente solo lee HTML, JavaScript y CSS en este caso, tu problema debe ser otro. Porque no publicas todo tu codigo para ver que pasa.

ElJavista · #12 (**permalink**) 01/04/2010, 17:37

dohko7, ese código lo hice especialmente para responder esta pregunta y hasta ahora no veo ningún forista diciendo que le sirvió. Eso me fustra, tú parecías el más interesado pero parece que te has tomado unas vaciones. Responde pues, estoy empeñado en que ese código te funcione.

ElJavista · #13 (**permalink**) 08/04/2010, 20:05

y nada! se murieron todos?!

dohko7 · #14 (**permalink**) 09/04/2010, 13:01

compadre disculpe la tardanza! efectivamente estuve ausente!

pues sigo en las mismas! en php no me reconoce el id de la tabla!

me gustaria atacarte con otra pregunta!! voy:

me gustaria hacer un menu con submenu parecidos a los de esta pagina

http://www.araudi.net/Desplegables/m...plegable7.html

o como este

http://www.tunait.com/javascript/scr...accesible.html

pero no logro atinarle al codigo!! pienso que el "ver codigo fuente" no funciona para este tipo de cosas!!!

si puedes echarme una mano!! seria buehno!

disculpa por no mantenerme al tanto de tu explicacion!! xD

ElJavista · #15 (**permalink**) 21/04/2010, 16:20

Repito que PHP no tiene nada que ver con el asunto, fijate el código fuente que se muestra en el navegador y busca a ver ahí el error, tal vez sea un id repetido o algo así.

Por otra parte, en cuanto a lo que solicitas, dime, quieres conseguir implementar eso o quieres aprender a hacerlo tú mismo? Si es lo primero, hay cantidad de códigos ya hechos en internet, y si es lo segundo pues creo que todavía no es momento para que aprendas eso.