title: CSS rules not applied to elements appended from jquery
body: <p>I've search through the similar questions but none answered my problem. (all those problems seemed related to typos)</p>
  
  <p>I'm just making this for fun.  I'm creating a table using jquery based on json data. Problem is, the appended table rows don't inherit any of the CSS rules.  I feel like I've read about the cause for this before, specifically to tables, but the info eludes me.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>            &lt;table width="100%" class="" id="mytable"&gt;
                  &lt;thead&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;&lt;td&gt;f&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;b&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;a&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    tr:nth-child(even){background:blue}
      tr:nth-child(odd){background:green}
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>        // Build some test data
          var data = [];
          var cols = ['Col-A','Col-B','Col-C','Col-D'];
          for (i=0;i&lt;10;i++){
              data.push(['A_'+i,'B_'+i,'C_'+i,'D_'+i]);
          }
          // data that would be sent to 
          var json = JSON.stringify({columns:cols, data:data});
  
  
          // build the table
          $('#mytable').tables(json);
  
  
      });
  
  
      // the magic function
      jQuery.fn.tables = function(json) {
          var obj = JSON.parse(json);
          var head = this.find('thead');
          var bod  = this.find('tbody');
  
          // Build columns
          head.append('&lt;tr&gt;');
          for (i=0;i&lt;obj.columns.length;i++){
              head.append('&lt;th&gt;'+obj.columns[i]+'&lt;/th&gt;');
  
          }
          head.append('&lt;/tr&gt;');
  
          // Add row data
          for (i=0;i&lt;obj.data.length;i++){
              bod.append('&lt;tr&gt;');
              for(j=0;j&lt;obj.data[i].length;j++){
                  bod.append('&lt;td&gt;'+obj.data[i][j]+'&lt;/td&gt;');
              }
              bod.append('&lt;/tr&gt;');    
          }
  
          return this;
      }
  </code></pre>