JQuery не может получить доступ к элементам, созданным с использованием DOM

Добрый день! У меня есть этот код ниже, который отображает таблицу и работает. Я могу отобразить таблицу и ее содержимое. Вот код:JQuery не может получить доступ к элементам, созданным с использованием DOM

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

     for(x=0; x<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); 
     } 
    }

Но тогда, когда я пытаюсь поставить некоторые цвета поочередно на столе с помощью JQuery, она не может найти строки, которые были созданы с помощью DOM. Только заголовок таблицы таблицы, который находится в моем html-коде, заполняется цветом. Это мой код JQuery:

$("#tblData tr:even").css("background-color", "pink"); 
$("#tblData tr:odd").css("background-color", "yellow");

Не могли бы вы помочь мне? Огромное спасибо заранее! Любая помощь приветствуется!

источник

2016-07-11 Jjjjjjjjjj

Почему вы не используете [CSS] (http://quirksmode.org/css/selectors/nthchild.html) для этого? 'tr: nth-child (even) {background-color: pink} tr: nth-child (нечетно) {background-color: yellow}' – Andreas

Я это рассмотрел, но тогда у меня также есть другие коды, которые нуждаются в таком виде решение. В любом случае, спасибо за ваше предложение. – Jjjjjjjjjj

Когда этот код jQuery работает? Ваш код для добавления строк выглядит так, как будто он добавлен после завершения запроса AJAX. Это происходит асинхронно. Вам нужно убедиться, что код jQuery запущен после завершения этого кода. – ADyson

Ответ на мой вопрос - запустить код JQuery после создания элементов.

источник

2016-07-13 03:52:57 Jjjjjjjjjj

JQuery не может получить доступ к элементам, созданным с использованием DOM

ответ

Смежные вопросы