Comunidad de diseño web y desarrollo en internet online

Jquery en tablas !!! ayuda

Citar            
MensajeEscrito el 11 May 2007 01:44 pm
hola---mi problema es que recien mi informo que el hover no funciona en ie y por lo contrario eh leido por ahi que tengo que ultilizar jquery, alguien me puede dar una ayuda con jquery como hacer que hover me funcion en mis tablas posteando un script en query!!!
gracias a usted y a estos foros cada dia uno aprende mas :lol:

Por PERVack

8 de clabLevel



Genero:Masculino  

Perú

firefox
Citar            
MensajeEscrito el 11 May 2007 02:33 pm
Aquí está la respuesta.

Una cosa, es recomendable el uso de buscadores como Google.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 11 May 2007 05:33 pm
Primero, te recomiendo que leas el tutorial basico de jquery. Te ayudará a entender el codigo.

Lo que debes poner es lo siguiente: Primero, una hoja de estilo (o tag <style>) en tu documento, algo como:

Código :

<style type="text/css">
.hoverFila{
background-color:#f00;
}
.hoverCelda{
color:#fc0;
}
</style>

Estas clases, las añadiremos dinamicamente a filas o celdas, con el siguiente script:

Código :

<script>
$(document).ready(function(){
   function celdas(){
      $("table tr td").mouseover(function(){
         $(this).addClass("hoverCelda");
      });
      $("table tr td").mouseout( function(){
         $(this).removeClass("hoverCelda");
      });
   }
   function filas(){
      $("table tr").mouseover(function(){
         $(this).addClass("hoverFila");
      });
      $("table tr").mouseout( function(){
         $(this).removeClass("hoverFila");
      });
   }
   celdas();
   filas();
});
</script>

Lo que hace es añadirle las clases antes establecidas a los elementos que quieres. Puede usar solo el de celdas o filas, o los dos. Para eso tienes que editar las llamadas al final ( celdas(); filas();).

Espero te funcione bien. Si tienes dudas, solo pregunta. ;)

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 11 May 2007 07:31 pm
Así escribes menos código. (Aprovechando el mismo CSS de arriba)

Código :

<script type="text/javascript">
$(document).ready(function(){
   $("table tr td").hover(function(){  //hover para las celdas
      $(this).addClass("hoverCelda");
   },function(){
      $(this).removeClass("hoverCelda");
   });

   $("table tr").hover(function(){  //hover para las filas
      $(this).addClass("hoverFila");
   },function(){
      $(this).removeClass("hoverFila");
   });
});
</script>

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 11 May 2007 09:29 pm
edito una vez este mensaje por q estoy alegre ya m salio y ya lo entendi algo, si tengo alguna duda espero contar con ustedes.gracias una vez mas :cool:
Como se haria para que 2 o mas filas o celdas tengan diferentes hover

Por PERVack

8 de clabLevel



Genero:Masculino  

Perú

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.