jQuery highlight table fila

Necesito resaltar una fila de la tabla sobre el mouse. Parece una cosa fácil de hacer, ¿verdad? Especialmente usando jQuery. Pero, por desgracia, no tengo tanta suerte.jQuery highlight table fila

He probado diferentes soluciones para resaltar una fila de la tabla, pero nada parece funcionar :-(

he probado los siguientes guiones:

// TEST one  
jQuery(document).ready(function() { 

    jQuery("#storeListTable tr").mouseover(function() { 
    $(this).parents('#storeListTable tr').toggleClass("highlight"); 
    alert('test'); // Just to test the mouseover event works 
    }); 

}); 

//TEST 2 
jQuery(document).ready(function() { 

    $("#storeListTable tbody tr").hover( 
    function() { // mouseover 
      $(this).addClass('highlight'); 
    }, 
    function() { // mouseout 
      $(this).removeClass('highlight'); 
    } 
    ); 
});

Este es mi código HTML

<html> 
    <head> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
media="screen" charset="utf-8" /> 
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></ 
script> 
    </head> 
    <body> 

<table id="storeListTable"> 
    <thead> 
     <tr class="even"> 
     <th>ID</th> 
     <th>Navn</th> 
     <th>E-post</th> 
     <th>Nettside</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="" id="store1"> 
     <td>10</td> 
     <td>Boss Store Oslo</td> 
     <td> <a href="mailto:">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store3"> 
     <td>8</td> 
     <td>Brandstad Oslo City</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store4"> 
     <td>7</td> 
     <td>Fashion Partner AS</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store5"> 
     <td>1</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store6"> 
     <td>2</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
    </tbody> 
    </table> 
    </body> 
</html>

Así que .... ¿alguien podría dar un empujón en la dirección correcta?

ACTUALIZACIÓN

no estoy usando jQuery para destacar filas de la tabla más, pero CSS.

Esto es para los elementos de la lista, pero supongo que esto funcionará para las filas de la tabla así:

li: nth-child (impar) {background-color: # f3f3f3; }

Fuente

2009-04-17 Steven

probar este plugin de http://p.sohei.org/jquery-plugins/columnhover/

Así es como se utiliza.

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#storeListTable').columnHover({ hoverClass:'highlight'}); 
    }); 
</script>

Cuide

Fuente

2009-04-18 06:04:27 AlteredConcept

Gracias amigo. Ese es el complemento que terminé usando. – Steven

funciona pero viejo. usa el método método de fondo de color de Julian. nota - es decir, ahora es aproximadamente 1.5% (y se reduce) - y Móvil es aproximadamente 7% (y está creciendo_ - entonces, cuál enfocarse en seguir adelante es fácil :) –

¿Aparece realmente el mensaje de alerta cuando realiza la prueba?

Si es así, es posible que el problema sea con su CSS. Me llevó mucho tiempo darme cuenta de que la mayoría de los estilos aplicados a una etiqueta tr no tienen ningún efecto. Así que, en general, es necesario aplicar estilos a cada td en la fila

.highlight td {highlighted appearance}

en lugar de

.highlight {highlighted appearance}

Fuente

2009-04-17 09:36:33 wheresrhys

+1 wheresrhys. Usar una regla de fondo en .highlight td hizo que tu 'TEST 2' funcionara bien para mí.

'TEST 1' no lo hará, debido a la llamada innecesaria parents().

Fuente

2009-04-18 05:03:44 bobince

Si usted no necesita el apoyo IE6, el resaltado se puede hacer con algunos simples CSS:

#table tr:hover { 
    background-color: #ff8080; 
}

Fuente

2009-04-20 15:45:26 Julian

Este es el enfoque predeterminado que estoy usando ahora (junio de 2012) . Vive y aprende :) – Steven

vez, me encontré con esta solución - funciona perfectamente - sólo ¡añadir! Por desgracia, no sé el autor :(

<script type="text/javascript"> 

    $("#table_id").not(':first').hover(
     function() { 
      $(this).css("background","red"); 
     }, 
     function() { 
      $(this).css("background",""); 
     } 
    ); 

    </script>

Fuente

2011-07-12 20:31:29

Tome un vistazo a este How to highlight rows in a table on mouse hover?

Fuente

2012-05-30 09:27:39

Por supuesto, la solución de Julian con una simple CSS es preferible.Si desea hacerlo de forma dinámica en javascript, puede hacerlo de esta manera

$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');}); 
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');});

Si tiene más divs por fila, se podría especificar el div ser destacado, dando a cada clase fila = "fila" y poniendo 'div.row' como segundo argumento de on().

Fuente

2012-07-21 11:44:43 zevero

jQuery highlight table fila

Respuesta

Cuestiones relacionadas