Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[SOLUCIONADO] Iluminar filas

 Estas en el tema de Iluminar filas en el foro de Frameworks JS en Foros del Web. Hola, por favor tengo este código que lista unas filas y lo que quiero es que se vayan iluminando al pasar con el raton pero ...
  #1 (permalink)  
Antiguo 06/01/2014, 15:29
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Iluminar filas
Hola, por favor tengo este código que lista unas filas y lo que quiero es que se vayan iluminando al pasar con el raton pero no me sale.

Código Javascript: 
Ver original
  1. <!--
  2. function ini() {
  3.     
  4.   tab=document.getElementById('tabl');
  5.   for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {
  6.     ele.onmouseover = function() {iluminar(this,true)}
  7.     ele.onmouseout = function() {iluminar(this,false)} 
  8.   }
  9. }
  10.  
  11. function iluminar(obj,valor) {
  12.   fila = obj.parentNode;
  13.  
  14.     for (i=0; ele = fila.getElementsByTagName('td')[i]; i++)
  15.       ele.style.background = (valor) ? '#B9F8F8' : '';
  16. }
  17. -->
  18.  
  19.  
  20. function filtrar()
  21.  
  22. {
  23.  
  24. $.ajax({
  25. data: $("#frm_filtro").serialize()+ordenar,
  26. type: "POST",
  27. dataType: "json",
  28. url: "ajax.php?action=listar",
  29. beforeSend:function(){
  30. $('.carga1').css('display','block');
  31. $('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
  32. }, 
  33. complete: function() {
  34. $(".carga1").show();
  35. $(".carga1").hide();
  36. }, 
  37. success: function(data){ 
  38. var html_user ='' ;
  39. if(data.length > 0){ 
  40. $.each(data, function(i,item){   
  41.  html_user += ' <body>'; 
  42.  html_user += '<form action="prod_sppb.php" method="post" name="nombreform">';
  43.  html_user += '<table id="tabl">'; 
  44.  html_user += '<tr bgcolor=#DFEBFF onMouseOver="ini()"  ondblclick="pulsar(this, '+ String.fromCharCode(39) + item.id_aviso +String.fromCharCode(39) + ');" >';
  45.  html_user += '<td style="'+item.style+'"><input name="demo"  type="checkbox" value="' + item.id_aviso + '"/></td>';
  46.  html_user += '<td  style="'+item.style+'">'+item.id_aviso+'</td>';
  47.  html_user += '<td  style="'+item.style+'">'+item.telefonos+'</td>';
  48.  html_user += '<td  style="'+item.style+'">'+item.name+' '+item.apellidos+'</td>';
  49.  html_user += '<td  style="'+item.style+'">'+item.calle+'</td>';
  50.  html_user += '<td  style="'+item.style+'">'+item.localidad+'</td>';
  51.  html_user += '<td  style="'+item.style+'">'+item.aparatos+'</td>';
  52.  html_user += '<td  style="'+item.style+'">'+item.marcas+'</td>';
  53.  html_user += '</tr>';
  54.  html_user += '</table>';
  55.  html_user += '</form>';
  56.  html_user += '</body>';

El error que me da:

Código HTML: 
Ver original
  1. TypeError: tab is null
  2.     
  3. for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {


Gracias y feliz año.
Última edición por satjaen; 06/01/2014 a las 15:44
  #2 (permalink)  
Antiguo 06/01/2014, 18:25
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 11 meses
Puntos: 977
Respuesta: Iluminar filas
Te complicas demasiado con algo tan sencillo como "ilumninar" las filas de una tabla al pasar el puntero del mouse encima de ellas, cuando con 5 líneas lo puedes hacer:

Código Javascript: 
Ver original
  1. $("#tabl tr").hover(function(){
  2.     $(this).css("background", "#B9F8F8");
  3. }, function(){
  4.     $(this).css("background", "#FFF");
  5. });

No alcanzaste a poner todo el código, pero ten en cuenta que si no adhieres al documento la tabla que creas, la tabla no se mostrará y, por lo tanto, la "iluminación" no surtirá efecto.

Aquí tienes un pequeño ejemplo de esto en ejecución.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #3 (permalink)  
Antiguo 07/01/2014, 02:55
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Iluminar filas
Gracias Alexis, pero no consigo que funcione:

Código Javascript: 
Ver original
  1. $("#tabl tr").hover(function(){
  2.     $(this).css("background", "#B9F8F8");
  3. }, function(){
  4.     $(this).css("background", "#FFF");
  5. });
  6.  
  7.  
  8.  
  9.  
  10.  
  11. function filtrar()
  12.  
  13. {
  14.  
  15. $.ajax({
  16. data: $("#frm_filtro").serialize()+ordenar,
  17. type: "POST",
  18. dataType: "json",
  19. url: "ajax.php?action=listar",
  20. beforeSend:function(){
  21. $('.carga1').css('display','block');
  22. $('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
  23. }, 
  24. complete: function() {
  25. $(".carga1").show();
  26. $(".carga1").hide();
  27. }, 
  28. success: function(data){ 
  29. var html_user ='' ;
  30. if(data.length > 0){ 
  31. $.each(data, function(i,item){   
  32.  html_user += ' <body>'; 
  33.  html_user += '<form action="prod_sppb.php" method="post" name="nombreform">';
  34.  html_user += '<table id="tabl">'; 
  35.  html_user += '<tr bgcolor=#DFEBFF onMouseOver="ini()"  ondblclick="pulsar(this, '+ String.fromCharCode(39) + item.id_aviso +String.fromCharCode(39) + ');" >';
  36.  html_user += '<td style="'+item.style+'"><input name="demo"  type="checkbox" value="' + item.id_aviso + '"/></td>';
  37.  html_user += '<td  style="'+item.style+'">'+item.id_aviso+'</td>';
  38.  html_user += '<td  style="'+item.style+'">'+item.telefonos+'</td>';
  39.  html_user += '<td  style="'+item.style+'">'+item.name+' '+item.apellidos+'</td>';
  40.  html_user += '<td  style="'+item.style+'">'+item.calle+'</td>';
  41.  html_user += '<td  style="'+item.style+'">'+item.localidad+'</td>';
  42.  html_user += '<td  style="'+item.style+'">'+item.aparatos+'</td>';
  43.  html_user += '<td  style="'+item.style+'">'+item.marcas+'</td>';
  44.  html_user += '</tr>';
  45.  html_user += '</table>';
  46.  html_user += '</form>';
  47.  html_user += '</body>';



Este ejemplo tampoco me funciona:

Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>JS Bin</title>
  6. <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.js"></script>
  7. <script>
  8. $("#tabl tr").hover(function(){
  9.   $(this).css("background", "#B9F8F8");
  10. }, function(){
  11.   $(this).css("background", "#FFF");
  12. });
  13. </script>
  14. </head>
  15. <body>
  16.   <table id="tabl" border = 1>
  17.     <tr>
  18.       <td>UNO</td>
  19.       <td>DOS</td>
  20.       <td>TRES</td>
  21.       <td>CUATRO</td>
  22.     </tr>
  23.     
  24.     <tr>
  25.       <td>UNO</td>
  26.       <td>DOS</td>
  27.       <td>TRES</td>
  28.       <td>CUATRO</td>
  29.     </tr>
  30.     
  31.     <tr>
  32.       <td>UNO</td>
  33.       <td>DOS</td>
  34.       <td>TRES</td>
  35.       <td>CUATRO</td>
  36.     </tr>
  37.   </table>
  38. </body>
  39. </html>
Última edición por satjaen; 07/01/2014 a las 04:03
  #4 (permalink)  
Antiguo 07/01/2014, 07:50
Avatar de jonni09lo
Colaborador
  
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 14 años, 1 mes
Puntos: 397
Respuesta: Iluminar filas
Bueno voy a ser curioso, por qué usar jQuery para hacer algo que perfectamente se puede hacer con CSS solamente?

No me deja de parecer algo sumamente innecesario.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #5 (permalink)  
Antiguo 07/01/2014, 08:23
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Iluminar filas
Gracias, pero también lo he intentado y no me sale:


Código Javascript: 
Ver original
  1. $datos = array(); 
  2.      
  3.     while($row = mysql_fetch_array($query)) 
  4.     { 
  5.          
  6.           if($row["qnum"]==1)$style="#tabl tr{
  7.                            background:#FFFFFF;
  8.                                }
  9.                              #tabl tr:hover{
  10.                            background:#B9F8F8;
  11.                                                    }";
  12.       
  13.     
  14.     
  15.     
  16.         $datos[] = array( 
  17.             'id_aviso'          => $row['id_aviso'], 
  18.             'telefonos'          => $row['telefonos'], 
  19.             'name'      => utf8_encode($row['name']), 
  20.             'apellidos'       => utf8_encode($row['apellidos']),
  21.             'calle'       => utf8_encode($row['calle']),
  22.             'localidad'        => utf8_encode($row['localidad']),
  23.             'aparatos'        => utf8_encode($row['aparatos']),
  24.             'marcas'        => utf8_encode($row['marcas']),
  25.             'style'       =>  $style
  26.             
  27.             
  28.         ); 
  29.     }


Código Javascript: 
Ver original
  1. function filtrar()
  2.  
  3. {
  4.  
  5. $.ajax({
  6. data: $("#frm_filtro").serialize()+ordenar,
  7. type: "POST",
  8. dataType: "json",
  9. url: "ajax.php?action=listar",
  10. beforeSend:function(){
  11. $('.carga1').css('display','block');
  12. $('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
  13. }, 
  14. complete: function() {
  15. $(".carga1").show();
  16. $(".carga1").hide();
  17. }, 
  18. success: function(data){ 
  19. var html_user ='' ;
  20. if(data.length > 0){ 
  21. $.each(data, function(i,item){   
  22.  html_user += ' <body>'; 
  23.  html_user += '<form action="prod_sppb.php" method="post" name="nombreform">';
  24.  html_user += '<table id="tabl">'; 
  25.  html_user += '<tr bgcolor=#DFEBFF ondblclick="pulsar(this, '+ String.fromCharCode(39) + item.id_aviso +String.fromCharCode(39) + ');" >';
  26.  html_user += '<td style="'+item.style+'"><input name="demo"  type="checkbox" value="' + item.id_aviso + '"/></td>';
  27.  html_user += '<td  style="'+item.style+'">'+item.id_aviso+'</td>';
  28.  html_user += '<td  style="'+item.style+'">'+item.telefonos+'</td>';
  29.  html_user += '<td  style="'+item.style+'">'+item.name+' '+item.apellidos+'</td>';
  30.  html_user += '<td  style="'+item.style+'">'+item.calle+'</td>';
  31.  html_user += '<td  style="'+item.style+'">'+item.localidad+'</td>';
  32.  html_user += '<td  style="'+item.style+'">'+item.aparatos+'</td>';
  33.  html_user += '<td  style="'+item.style+'">'+item.marcas+'</td>';
  34.  html_user += '</tr>';
  35.  html_user += '</table>';
  36.  html_user += '</form>';
  37.  html_user += '</body>';
  #6 (permalink)  
Antiguo 07/01/2014, 08:27
Avatar de jonni09lo
Colaborador
  
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 14 años, 1 mes
Puntos: 397
Respuesta: Iluminar filas
Vuelvo y soy curioso, por qué no simplemente añades esas lineas a un archivo CSS en vez de generarlo dinamicamente? así como lo haces ni tiene sentido, ni es optimo, ni tampoco funcional.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #7 (permalink)  
Antiguo 07/01/2014, 08:30
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Iluminar filas
Es que no sé como hacerlo con un código css aparte.
  #8 (permalink)  
Antiguo 07/01/2014, 08:33
Avatar de jonni09lo
Colaborador
  
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 14 años, 1 mes
Puntos: 397
Respuesta: Iluminar filas
Bueno pero entonces como rayos estas haciendo el sitio web? acaso no estás usando CSS para el diseño? si es un ejercicio tendría todo el sentido del mundo que no sepas...

Para que hagas la prueba simplemente coloca dentro de las etiquetas head de tu sitio (en donde aparecerá la tabla):

Código HTML: 
Ver original
  1. <style type="text/css">
  2. #tabl tr{
  3.     background:#FFFFFF;
  4. }
  5. #tabl tr:hover{
  6.     background:#B9F8F8;
  7. }
  8. </style>

Ojo que esto no es optimo, debería ir en un archivo CSS a parte...

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 07/01/2014, 08:47
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Iluminar filas
Llevas toda la razón. Me he liado porque es una lista dinámica
  #10 (permalink)  
Antiguo 07/01/2014, 08:53
Avatar de jonni09lo
Colaborador
  
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 14 años, 1 mes
Puntos: 397
Respuesta: Iluminar filas
Eso es indeterminante para CSS ya que a diferencia de javascript, este siempre aplicará a todos los elementos, aún si estos se los genera de manera dinámica.

La razón principal por la que no te funcionaba el código de @Alexis88 es simplemente porque estabas invocando el hover y luego generabas la tabla, así que los listeners solo aplicaban a los elementos existentes en ese momento, no a los nuevos (en cuyo caso se hubiese usado mejor on para delegar los eventos)

Pero como el tema es tan simple, insistí una y otra vez en CSS para que aprendas a usar correctamente cada lenguaje (y no te complicases la vida ).

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #11 (permalink)  
Antiguo 07/01/2014, 08:55
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Iluminar filas
Gracias y feliz año
  #12 (permalink)  
Antiguo 07/01/2014, 11:10
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 11 meses
Puntos: 977
Respuesta: Iluminar filas
Exacto jonni09lo, lo más práctico para estos casos es utilizar CSS, quise ayudarlo resolviendo esto desde JS ya que así lo pedía, pero es mejor hacerlo de la forma que indicas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #13 (permalink)  
Antiguo 07/01/2014, 13:46
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Iluminar filas
Es verdad Alexis. Así lo pedí. Pero el que se complico fui yo

Etiquetas: ajax, filas, html, input, javascript, js, php, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:06.