javascript - JQuery:无法从表列中获取元素

Question

我正在尝试使用表列中的值动态购买一些复选框。虽然表是按照应有的方式创建的(我使用对服务器的获取请求动态填充它)，但我无法从其任何列中获取值，因此我可以使用它们。这是我的代码:

$(document).ready(function() 
{
/*
$.get("sub3",function(responseJson) 
{
    if(responseJson!=null)
    {
        $("#table1").find("tr:gt(0)").remove();
        var table1 = $("#table1");
        $.each(responseJson, function(key,value) { 
            var rowNew = $("<tr><td></td><td></td><td></td><td></td></tr>");
            rowNew.children().eq(0).text(value['idp']); 
            rowNew.children().eq(1).text(value['producator']); 
            rowNew.children().eq(2).text(value['culoare']); 
            rowNew.children().eq(3).text(value['pret']); 
            rowNew.appendTo(table1); 
        }); 
    }
});
*/

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
       if (xmlhttp.status == 200) 
       {
            $("#table1").find("tr:gt(0)").remove();
            var table1 = $("#table1");
            var Data = JSON.parse(xmlhttp.responseText);
            $.each(Data, function(key,value) { 
                var rowNew = $("<tr><td></td><td></td><td></td><td></td></tr>");
                rowNew.children().eq(0).text(value['idp']); 
                rowNew.children().eq(1).text(value['producator']); 
                rowNew.children().eq(2).text(value['culoare']); 
                rowNew.children().eq(3).text(value['pret']); 
                rowNew.appendTo(table1); 
            });
       }
       else if (xmlhttp.status == 400) {
          alert('There was an error 400');
       }
       else {
           alert('something else other than 200 was returned');
       }
    }
};

xmlhttp.open("GET", "sub3", true);
xmlhttp.send();

createBox();
});


function createBox()
{
    var items=[];
    $('#table1 tr td:nth-child(2)').each( function()
    {
       items.push( $(this).text() );       
    });
    var items = $.unique( items );
    console.log(items);
    for (var i = 0; i < items.length; i++) 
    {
        addCheckbox(items[i]);
    }

}

function addCheckbox(name) 
{
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name 
}).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
}

在函数 createbox() 中，console.log(items) 会打印 []，而它应该填充一些已添加到我的表中的值。我做错了什么？

Answer 1

移动createBox()；在 xmlhttp.onreadystatechange 函数中调用 $.each 后触发

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
       if (xmlhttp.status == 200) 
       {
            $("#table1").find("tr:gt(0)").remove();
            var table1 = $("#table1");
            var Data = JSON.parse(xmlhttp.responseText);
            $.each(Data, function(key,value) { 
                var rowNew = $("<tr><td></td><td></td><td></td><td></td></tr>");
                rowNew.children().eq(0).text(value['idp']); 
                rowNew.children().eq(1).text(value['producator']); 
                rowNew.children().eq(2).text(value['culoare']); 
                rowNew.children().eq(3).text(value['pret']); 
                rowNew.appendTo(table1); 
            });
            createBox();
       }
       else if (xmlhttp.status == 400) {
          alert('There was an error 400');
       }
       else {
           alert('something else other than 200 was returned');
       }
    }
};