title: Apply Multiple CSS classes on an HTML element (jQuery addClass)
body: <p>Given this HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      tr.Class1
      {
        background-color: Blue;
      }
      .Class2
      {
        background-color: Red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;tr id="tr1"&gt;
        &lt;td&gt;Row 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr2"&gt;
        &lt;td&gt;Row 2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Below is the script secion. What will happen when I click on the first row? Will it remain blue, or will it turn red? If it will remain blue, how do I get it to turn red instead WITHOUT removing the Class1 class from the row (so I can remove the Class2 class later and the row will return to its original color of blue)?</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
  
    $(document).ready(function() {
      $("#tr1").addClass("Class1");
  
      $("tr").click(function() {
        /* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */
  
        $(".Class2").removeClass("Class2");
        $(this).addClass("Class2");
      });
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit</strong>
  I should say - I tried this, and it's not working as expected (in either FireFox or IE). What is going on?</p>