jQuery Highlight-Tabellenzeile

Ich muss eine Tabellenzeile mit der Maus markieren. Es scheint so einfach zu sein, oder? Vor allem mit jQuery. Aber leider habe ich nicht so viel Glück.jQuery Highlight-Tabellenzeile

Ich habe für die Hervorhebung eine Tabellenzeile verschiedene Lösungen getestet, aber nichts scheint :-(

ich die folgenden Skripte getestet haben zu arbeiten: mein HTML-Code

Dies ist

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

<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>

.... könnte jemand geben Sie mir einen Schubs in die richtige Richtung?

UPDATE

Ich bin mit jQuery nicht Tabellenzeilen mehr, sondern CSS zu markieren.

Dies ist für Listenelemente, aber ich vermute, dass dies auch für Tabellenzeilen arbeiten:

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

Quelle

2009-04-17 Steven

Versuchen Sie dieses Plugin http://p.sohei.org/jquery-plugins/columnhover/

Hier ist, wie Sie es verwenden.

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

Vorsicht

Quelle

2009-04-18 06:04:27 AlteredConcept

Dank mate. Das ist das Plugin, das ich verwendet habe. – Steven

funktioniert aber alt. Verwenden Sie die Methode background-color method von Julian. Hinweis - dh ist jetzt etwa 1,5% (und schrumpft) - und Mobile ist etwa 7% (und growing_ - so dass man sich auf die Zukunft konzentrieren ist einfach :) –

Wird die Warnmeldung beim Testen tatsächlich angezeigt?

Wenn ja, ist es möglich, dass das Problem mit Ihrem CSS ist. Es hat lange gedauert, bis ich festgestellt habe, dass die meisten Stile, die auf ein tr-Tag angewendet werden, keine Wirkung haben. Also, in der Regel müssen Sie Stile zu jeder td in der Reihe

.highlight td {highlighted appearance}

statt

.highlight {highlighted appearance}

Quelle

2009-04-17 09:36:33 wheresrhys

+1 wheresrhys anzuwenden. Unter Verwendung einer Hintergrundregel auf .highlight td hat Ihr 'TEST 2' für mich gut funktioniert.

'TEST 1' wird nicht, wegen der unnötigen parents() Anruf.

Quelle

2009-04-18 05:03:44 bobince

Wenn Sie nicht IE6 Unterstützung benötigen, kann die Markierung mit einigen einfachen CSS erfolgen:

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

Quelle

2009-04-20 15:45:26 Julian

Dies ist die Standard-Ansatz, den ich jetzt benutze (Juni 2012) . Lebe und lerne :) – Steven

Einmal fand ich diese Lösung - perfekt funktioniert - nur hinzufügen! Leider weiß ich nicht der Autor :(

<script type="text/javascript"> 

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

    </script>

Quelle

2011-07-12 20:31:29

einen Blick auf dieses Nehmen How to highlight rows in a table on mouse hover?

Quelle

2012-05-30 09:27:39

Natürlich ist die Lösung von Julian mit einfachen CSS vorzuziehen.Wenn Sie es dynamisch in Javascript tun möchten, können Sie es tun, wie diese

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

Wenn Sie mehr divs pro Zeile haben, könnten Sie die div angeben, indem jede Zeile class = „Zeile“ hervorgehoben und setzen 'div.row' als zweites Argument von on().

Quelle

2012-07-21 11:44:43 zevero

jQuery Highlight-Tabellenzeile

Antwort

Verwandte Themen