JQuery can't access elements created using DOM
<p>Good day! I have this code below that displays a table and it's working. I can display the table and its content. Here's the code:</p>

<pre><code>     if(xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        var x = 0;
        var table = document.getElementById("tblData");

        for(x=0; x&lt;data.length; x++) {

          dataInstance = data[x].split('*');

          var row = document.createElement("tr");
          var td1 = document.createElement("td");
          var td2 = document.createElement("td");
          var td3 = document.createElement("td");
          var td4 = document.createElement("td");
          var td5 = document.createElement("td");
          var td6 = document.createElement("td");
          var td7 = document.createElement("td");;

          var cb = document.createElement('input');
          cb.setAttribute("type", "checkbox");

          var tn1 = document.createTextNode(dataInstance[1]);
          var tn2 = document.createTextNode(dataInstance[2]);
          var tn3 = document.createTextNode(dataInstance[3]);
          var tn4 = document.createTextNode(dataInstance[4]);
          var tn5 = document.createTextNode(dataInstance[5]);
          var tn6 = document.createTextNode(dataInstance[6]);

          td1.appendChild(cb);
          td2.appendChild(tn1);
          td3.appendChild(tn2);
          td4.appendChild(tn3);
          td5.appendChild(tn4);
          td6.appendChild(tn5);
          td7.appendChild(tn6);

          row.appendChild(td1);
          row.appendChild(td2);
          row.appendChild(td3);
          row.appendChild(td4);
          row.appendChild(td5);
          row.appendChild(td6);
          row.appendChild(td7);

          table.appendChild(row);
        }
    }
</code></pre>

<p>But then, when I try putting up some colors alternately on my table using JQuery, it can't find the rows that were created using DOM. Only the table header of the table which is in my html code is filled with color. This is my JQuery code:</p>

<pre><code> $("#tblData tr:even").css("background-color", "pink");
 $("#tblData tr:odd").css("background-color", "yellow");
</code></pre>

<p>Can you please help me? Thank you so much in advance! Any help is appreciated!</p>