可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I need to highlight a table row on mouse over. Seems like an easy enough thing to do, right? Especially using jQuery. But alas, I'm not so lucky.

I've tested different solutions for highlighting a table row, but nothing seem to work :-(

I have tested the following scripts:

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

This is my HTML code

<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:a@brandstad.no">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:b@fashionpartners.com">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:c@online.no">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:d@follestad.com">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
    </tbody> 
  </table> 
  </body> 
</html>

So.... could anyone give me a push in the right direction?

UPDATE

I'm not using jQuery to highlight table rows any more, but CSS.

This is for list elements, but I'm guessing this will work for table rows as well:

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

回答1:

Try this plugin http://p.sohei.org/jquery-plugins/columnhover/

Here's how you use it.

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

Take care

回答2:

If you don't need IE6 support, the highlighting can be done with some simple CSS:

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

回答3:

Is the alert message actually popping up when you test?

If so, it's possible the problem is with your CSS. It took me a long time to realise that most styles applied to a tr tag don't have any effect. So, in general, you need to apply styles to each td in the row

.highlight td {highlighted appearance}

rather than

.highlight {highlighted appearance}

回答4:

+1 wheresrhys. Using a background rule on .highlight td made your ‘TEST 2’ work fine for me.

‘TEST 1’ won't, because of the unnecessary parents() call.

回答5:

Once, I found this solution - works perfectly - just add! Unfortunately, I do not know the author :(

<script type="text/javascript">

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

    </script>

回答6:

Take a look at this How to highlight rows in a table on mouse hover?

回答7:

Of course, the solution of Julian with simple CSS is to be preferred. If you want to do it dynamically in javascript, you could do it like this

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

If you have more divs per row, you could specify the div to be highlighted by giving each row class="row" and putting 'div.row' as the 2nd argument of on().