title: jQuery table row highlight onClick and restore onChange alternating css classes
body: <p>First post and new to jQuery. Looked hard but did not find a fully relevant post.</p>
  
  <p>Have alternating row colours in a table; one class NULL/empty one class=alt. jQuery script partially works to highlight the row when clicked.</p>
  
  <p>Question is: how do you use removeClass and then restore (addClass/toggleClass) the specific class that was removed on an onChange event?  Any help appreciated. Tks. (See Fiddle below)</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;table id="fooBar" border="0"&gt;
      &lt;tr&gt;
          &lt;th&gt;Text&lt;/th&gt;
          &lt;th&gt;Text&lt;/th&gt;
          &lt;th&gt;Text&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class=""&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="alt"&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=""&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="alt"&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>table {
      width:100%;
      border-collapse:collapse;
      table-layout:auto;
      vertical-align:top;
      margin-bottom:15px;
      border:1px solid #999999;
  }
  
  th {
      font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      color: #F2EDEB;
      border-right: 1px solid #C1DAD7;
      border-bottom: 1px solid #C1DAD7;
      border-top: 1px solid #C1DAD7;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: left;
      padding: 6px 6px 6px 12px;
      background: #522D25 url(images/bg_header.jpg) no-repeat;
  }
  
  tr {
      background: #fff;
      color: #261F1D;
  }
  
  tr:hover, tr.alt:hover {
      color: #261F1D;
      background-color: #E5C37E;
  }
  
  .highlighted {
      color: #261F1D;
      background-color: #E5C37E;
  }
  
  tr.alt {
      background: #F5FAFA;
      color: #B4AA9D;
  }
  
  td {
      border-right: 1px solid #C1DAD7;
      border-bottom: 1px solid #C1DAD7;
      padding: 6px 6px 6px 12px;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function () {
      $("tr").click(function () {
          $(this).closest("tr").siblings().removeClass("highlighted");
          $(this).toggleClass("highlighted");
      })
  });
  // Note: currently only works for row without '.alt' css class assigned (ie. empty)
  // question is how to replace a class and then RESTORE the class onChange
  </code></pre>
  
  <p>Here is the jsFiddle: <a href="http://jsfiddle.net/codeChaos1988/kh4VY/1/" rel="nofollow">http://jsfiddle.net/codeChaos1988/kh4VY/1/</a></p>
  
  <p>Also any pointers on best tutorial sites for actually learning to program in javascript/jQuery would be appreciated as well.</p>
  
  <p>Thank you for your help in advance.</p>