title: Change background color of table row when hovering over another row in same table
body: <p>This is my first post here and I'm by no means a skilled HTML/CSS/JavaScript programmer so please bear with me if I'm not expressing myself clear enough - sorry if it's too wordy!</p>
  
  <p>I'm using a classic HTML table for tabular content and want to be able to change the background color of a different row than the one I'm currently hovering.</p>
  
  <p>The reason for this is that I have many tables that are divided into "sub-tables", each with its own header and one or more rows below. These sub-tables - all with the same styling - are however not coded as tables, instead I simply use different classes to style them (this mainly because they are so many and so small, with 1-6 rows each incl header).</p>
  
  <p>What I want to do is that once you hover any of the sub-tables both its header and the row you're currenty pointing at should change background color (the latter easily achived with CSS). Thanks to a JavaScript found online I've managed to achive this - see <a href="http://jsfiddle.net/8DFkr/1/" rel="nofollow"><strong>sample code</strong></a>  which probably explains this better, see also the code below - however that requires a unique ID for each sub-header. (Note that each sub-table uses a separate tbody - if the <code>onMouseover</code> event was instead applied to each row the color of the sub-header would flicker/go on and off when hovering from one row to another - this never happens with CSS but only with JavaScript - plus creating much more code, of course.)</p>
  
  <p>Instead of having to assign unique IDs to each sub-header I'd like a solution which instead uses the classes, seeing as each sub-table uses the same ones (I'd of course assign a class to <code>tbody</code> then). I suppose the tricky part with this may be to ensure that just the header of the current sub-table is affected and not all at the same time.
  If it's easier to create a solution where each sub-table is in fact coded as a separate table (which may also be better from a semantic point of view?) then please do so. Even better would of course be if the JavaScript applied the <code>onMouseover</code> etc events by itself, so that I didn't have to put that into the inline code of each sub-table - I've seen that this can be done for buttons etc so I suppose it'd be possible for this to.</p>
  
  <p>I've never used jQuery so a pure JavaScript solution would be much preferred.</p>
  
  <p>For the sample code again please see <strong><a href="http://jsfiddle.net/8DFkr/1/" rel="nofollow">my fiddle</a></strong></p>
  
  <p>Many thanks for any input!</p>
  
  <p>The JavaScript:</p>
  
  <pre><code>function changeTo(myId) { document.getElementById(myId).className='sub-header-highlight'; }
  function changeBack(myId) { document.getElementById(myId).className='sub-header'; }
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>thead { color: #FFF; background: #000; }
  .sub-header { color: #FFF; font-weight: bold; background: #F00; }
  .sub-header-highlight { color:# FFF; font-weight: bold; background: #0F0; }
  tr.sub-header:hover { background: #0F0; } /* if JS turned off */
  
  .sub-row1 { color: #000; background: #FFF; }
  .sub-row2 { color: #000; background: #EEE; }
  tr.sub-row1:hover, .sub-row2:hover { background: #FF0; }
  </code></pre>
  
  <p>Part of the HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tbody onMouseover="changeTo('sub1');" onMouseout="changeBack('sub1');"&gt;
     &lt;tr class="sub-header" id="sub1"&gt;
        &lt;td&gt;Sub-Header 1&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class="sub-row1"&gt;
        &lt;td&gt;Contents of row 1&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class="sub-row2"&gt;
        &lt;td&gt;Contents of row 2&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class="sub-row1"&gt;
        &lt;td&gt;Contents of row 3&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>