title: jQuery highlight table row
body: <p>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. </p>
  
  <p>I've tested different solutions for highlighting a table row, but nothing seem to work  :-(</p>
  
  <p>I have tested the following scripts:</p>
  
  <pre><code>// 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'); 
       } 
     );
  });
  </code></pre>
  
  <p><strong>This is my HTML code</strong></p>
  
  <pre><code>&lt;html&gt; 
    &lt;head&gt; 
    &lt;title&gt;Title&lt;/title&gt; 
    &lt;link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
  media="screen" charset="utf-8" /&gt; 
    &lt;script type="text/javascript" src="js/jquery.js" charset="utf-8"&gt;&lt;/ 
  script&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
  
  &lt;table id="storeListTable"&gt; 
      &lt;thead&gt; 
        &lt;tr class="even"&gt; 
          &lt;th&gt;ID&lt;/th&gt; 
          &lt;th&gt;Navn&lt;/th&gt; 
          &lt;th&gt;E-post&lt;/th&gt; 
          &lt;th&gt;Nettside&lt;/th&gt; 
        &lt;/tr&gt; 
      &lt;/thead&gt; 
      &lt;tbody&gt; 
        &lt;tr class="" id="store1"&gt; 
          &lt;td&gt;10&lt;/td&gt; 
          &lt;td&gt;Boss Store Oslo&lt;/td&gt; 
          &lt;td&gt; &lt;a href="mailto:"&gt;E-post&lt;/a&gt;&lt;/td&gt; 
          &lt;td&gt; &lt;a href="#"&gt;www&lt;/a&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr class="" id="store3"&gt; 
          &lt;td&gt;8&lt;/td&gt; 
          &lt;td&gt;Brandstad Oslo City&lt;/td&gt; 
          &lt;td&gt; &lt;a href="mailto:a@brandstad.no"&gt;E-post&lt;/a&gt;&lt;/td&gt; 
          &lt;td&gt; &lt;a href="#"&gt;www&lt;/a&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr class="even" id="store4"&gt; 
          &lt;td&gt;7&lt;/td&gt; 
          &lt;td&gt;Fashion Partner AS&lt;/td&gt; 
          &lt;td&gt; &lt;a href="mailto:b@fashionpartners.com"&gt;E-post&lt;/a&gt;&lt;/td&gt; 
          &lt;td&gt; &lt;a href="#"&gt;www&lt;/a&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr class="" id="store5"&gt; 
          &lt;td&gt;1&lt;/td&gt; 
          &lt;td&gt;Follestad&lt;/td&gt; 
          &lt;td&gt; &lt;a href="mailto:c@online.no"&gt;E-post&lt;/a&gt;&lt;/td&gt; 
          &lt;td&gt; &lt;a href="#"&gt;www&lt;/a&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr class="even" id="store6"&gt; 
          &lt;td&gt;2&lt;/td&gt; 
          &lt;td&gt;Follestad&lt;/td&gt; 
          &lt;td&gt; &lt;a href="mailto:d@follestad.com"&gt;E-post&lt;/a&gt;&lt;/td&gt; 
          &lt;td&gt; &lt;a href="#"&gt;www&lt;/a&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
      &lt;/tbody&gt; 
    &lt;/table&gt; 
    &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>So.... could anyone give me a push in the right direction?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>   </p>
  
  <p>I'm not using jQuery to highlight table rows any more, but CSS.</p>
  
  <p>This is for list elements, but I'm guessing this will work for table rows as well:</p>
  
  <p>li:nth-child(odd) { background-color: #f3f3f3; }</p>