title: Changing background color of table row on hover
body: <p>This is my first post here, so sorry if my post is a little confusing.</p>
  
  <p>I'm working on an assignment which uses HTML5, CSS, and Javascript.  I'm trying to use javascript to change the color of a table row's background whenever a user hovers over that row. However, i've run into two issues.</p>
  
  <p>Here's a link to the JSFiddle containing the entire code:</p>
  
  <p><a href="http://jsfiddle.net/bguqp/8/" rel="nofollow">http://jsfiddle.net/bguqp/8/</a></p>
  
  <p>The first issue seems to be with this segment of code.  This code alternates the rows colors.  When removed, the table row's background color changes as it should whenever I hover over a row.  However, if I include this code in the javascript file, the row background color does not change.  </p>
  
  <pre><code>var tblrows = document.getElementsByTagName('tr');
  
  for(i=0;i&lt;tblrows.length;i++){
      if(i%2==0) tblrows[i].style.backgroundColor = '#0000FF';
      else tblrows[i].style.backgroundColor = '#C0C0C0';
  </code></pre>
  
  <p>Second, while the code is working on JSFiddle, it does not seem to be working in my web browser when run, even with the code above removed from the javascript file.</p>
  
  <p><em>EDIT</em></p>
  
  <p>Here is the Javascript code responsible for changing the table row background color on hover</p>
  
  <pre><code>$(document).ready(function(){
      $("table.stripe_table tr:odd").addClass("alternate");
  
      $("table.stripe_table tr").mouseover(function(){
          $(this).addClass("tr_onmouseover");
      });
      $("table.stripe_table tr").mouseout(function(){
          $(this).removeClass("tr_onmouseover");
      });
      $("table.stripe_table tr").click(function(){
          $(this).toggleClass("tr_onmouseclick");
      });
  });
  </code></pre>
  
  <p>and the CSS code i'm using in conjunction with the above javascript code</p>
  
  <pre><code>table.stripe_table tr.alternate{
      background-color: #CCC;
  }
  table.stripe_table tr.tr_onmouseover{
      background-color: #FC0
  }
  table.stripe_table tr.tr_onmouseclick{
      background-color: #F00;
  }
  </code></pre>