title: Applying Bootstrap "table-striped" after creating table rows dynamically
body: <p>I'm trying to ensure the <a href="http://twitter.github.io/bootstrap/" rel="noreferrer">Twitter Bootstrap</a> <code>table-stripped</code> CSS style is applied to a table whose rows are added dynamically at runtime. For some reason, that I'm trying to get to the bottom of, I can't get this particular style to work so that my new rows are styled with the stripped look.</p>
  
  <p>So if I have this HTML with <code>table-stripped</code> included:</p>
  
  <pre><code>&lt;table class="table table-bordered table-striped table-condensed table-hover" id="table2"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Heading A&lt;/th&gt;
              &lt;th&gt;Heading B&lt;/th&gt;
              &lt;th&gt;Heading C&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Then I run this JavaScript code:</p>
  
  <pre><code>for (var i = 0; i &lt; 5; i++)
  { 
      $('#table2 &gt; tbody:last').before('&lt;tr&gt;&lt;td&gt;' + i +'&lt;/td&gt;&lt;td&gt;b&lt;/td&gt;&lt;td&gt;c&lt;/td&gt;');
  }
  </code></pre>
  
  <p>I'll get my 5 new rows but they won't have the <code>table-stripped</code> style applied.</p>
  
  <p>Even if I add the class manually after creating using this it makes no difference.</p>
  
  <pre><code>$('#table2').addClass('table-hover'); 
  </code></pre>
  
  <p>I've created a <a href="http://jsfiddle.net/UyrDg/1/" rel="noreferrer">jsFiddle sample</a> so you can see this running.</p>