title: Changing the CSS of Table Row OnClick
body: <p>I'm Trying to change the background and text color of a table row on click using jQuery and CSS so that only one row may be selected at a time. However I cannot seem to get the CSS to change, even though the class is changing correctly from the jQuery function, so the jQuery appears to be working.</p>
  
  <p>I am very confused why the CSS doesn't change when the class is changed (which I can see happening on the inspect element view on chrome).</p>
  
  <p>Note that the table rows are being generated within a Django template page and the div classes are from Bootstrap.</p>
  
  <pre><code>&lt;div class="row panel panel-default"&gt;
    &lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Pass #&lt;/th&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Active&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="member"&gt;
          {% for member in filter_list %}
            {% with member.pass_set.all|first as pass %}
              &lt;tr&gt;
                  &lt;td&gt;{{member.id}}&lt;/td&gt;
                  &lt;td&gt;{{pass.active_id}}&lt;/td&gt;
                  &lt;td&gt;{{member.last_name}}&lt;/td&gt;
                  &lt;td&gt;{{member.first_name}}&lt;/td&gt;
                  &lt;td&gt;{{pass.member_type}}&lt;/td&gt;
                  &lt;td&gt;{{pass.season.is_current|yesno|capfirst}}&lt;/td&gt;
              &lt;/tr&gt;
            {% endwith %}
          {% endfor %}
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$("tr").click(function() {
      $(this).parent().children().removeClass(".selected");
      $(this).addClass(".selected");
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.member tr:hover {
      background-color: rgba(41, 103, 182, 0.89);
      color: #FFF;
  }
  .selected tr{
      background-color: rgba(41, 103, 182, 0.89);
      color: #FFF;
  }
  </code></pre>
  
  <p>I really thought this would be straight forward, but I have been stuck for a while. Thanks in advance for any help!</p>
  
  <hr>
  
  <p>Thanks for all the quick responses. I ended up taking advice from all three!</p>
  
  <p>Final solution:</p>
  
  <pre><code>.member tr.selected {
      background-color: rgba(41, 103, 182, 0.89);
      color: #FFF;
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$("tbody tr").click(function() {
     $(this).addClass('selected').siblings().removeClass("selected");
  });
  </code></pre>