title: tr:nth-child css zebra striping after xml jquery parsing
body: <p>How do I apply styling to a table after parsing XML data into the table?
  In the code below I Created the first three rows of a table using html, then the additional rows were created by parsing XML. however the Zebra stripe styling was not applied to the table after the jquery call. I've tried my best to find the problem with my code but I'm stumped.</p>
  
  <p>Here's a code sample of my html:</p>
  
  <pre><code>    &lt;head&gt;
      &lt;title&gt;Football Players&lt;/title&gt;
      &lt;style&gt;
        table{
            border-collapse: collapse;
            border: solid 1px #dddddd;
            width: 500px;
        }
        th{
            text-align: left;
        }
      &lt;/style&gt;
  
     &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Club&lt;/th&gt;
          &lt;th&gt;Number&lt;/th&gt;
          &lt;th&gt;Country&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Lionel Messi&lt;/td&gt;
          &lt;td&gt;Barcelona&lt;/td&gt;
          &lt;td&gt;10&lt;/td&gt;
          &lt;td&gt;Argentina&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Juan Mata&lt;/td&gt;
          &lt;td&gt;Manchester United&lt;/td&gt;
          &lt;td&gt;8&lt;/td&gt;
          &lt;td&gt;Spain&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the following is a snippet of my JQuery:</p>
  
  <pre><code>    $(document).ready(function () {
    $.ajax({
      type: "GET",
      url: "football_player.xml",
      dataType: "xml",
      success: processXML
  
    });
  
    function processXML(xml) {
      $(xml).find("football_player").each(function () {
        $("table tbody").append("&lt;tr class = 'myClass'&gt;");
        $("table tbody").append("&lt;td&gt;" + $(this).find("name").text() + "&lt;/td&gt;");
        $("table tbody").append("&lt;td&gt;" + $(this).find("club").text() + "&lt;/td&gt;");
        $("table tbody").append("&lt;td&gt;" + $(this).find("number").text() + "&lt;/td&gt;");
        $("table tbody").append("&lt;td&gt;" + $(this).find("country").text() + "&lt;/td&gt;");
        $("table tbody").append("&lt;/tr&gt;");           
      });//close processXML
  
  
      $("table tbody tr:nth-child(odd)").css("background-color", "#dddddd");
    }     
  });//close document.ready()
  </code></pre>
  
  <p>And lastly the XML file:</p>
  
  <pre><code>    &lt;football_players&gt;
    &lt;football_player&gt;
      &lt;name&gt;Cristiano Ronaldo&lt;/name&gt;
      &lt;club&gt;Real Madrid&lt;/club&gt;
      &lt;number&gt;7&lt;/number&gt;
      &lt;country&gt;Portugal &lt;/country&gt;
    &lt;/football_player&gt;
  
    &lt;football_player&gt;
      &lt;name&gt;Fernando Torres &lt;/name&gt;
      &lt;club&gt;Chelsea &lt;/club&gt;
      &lt;number&gt;9&lt;/number&gt;
      &lt;country&gt;Spain&lt;/country&gt;
    &lt;/football_player&gt;
  
    &lt;football_player&gt;
      &lt;name&gt;Iker Casillas&lt;/name&gt;
      &lt;club&gt;Real Madrid &lt;/club&gt;
      &lt;number&gt;1&lt;/number&gt;
      &lt;country&gt;Spain&lt;/country&gt;
    &lt;/football_player&gt;    
  
    &lt;football_player&gt;
      &lt;name&gt;David Beckham&lt;/name&gt;
      &lt;club&gt;Los Angeles Galaxy&lt;/club&gt;
      &lt;number&gt;23&lt;/number&gt;
      &lt;country&gt;England&lt;/country&gt;
    &lt;/football_player&gt;
  &lt;/football_players&gt;
  </code></pre>