title: How do I toggle a table row background color for Twitter Bootstrap?
body: <p>In reference to my earlier <a href="https://stackoverflow.com/questions/12624472/how-can-i-remove-a-background-tr-color-from-a-twitter-bootstrap-table">post</a>:</p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;table class="table table-bordered table-condensed table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Col 1&lt;/th&gt;
              &lt;th&gt;Col 2&lt;/th&gt;
              &lt;th&gt;Col 3&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Data 1&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Data 2&lt;/td&gt;
              &lt;td&gt;Data 3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Data 1&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Data 2&lt;/td&gt;
              &lt;td&gt;Data 3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Data 1&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Data 2&lt;/td&gt;
              &lt;td&gt;Data 3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function(){
      $('table.table-striped tr').on('click', function () {
          $(this).find('td').css('background-color', '#ff0000');
  
           // toggleClass doesn't seem to work
  
       });
   });
  </code></pre>
  
  <p>I'm trying to toggle the row color off an on via my click event.  Any idea if this is possible using a user defined css selector?</p>