2017-06-26 29 views
0

テーブルの列の値を使用していくつかのチェックボックスを動的に購入しようとしています。テーブルはどのように作成されるべきですか(私はサーバにgetリクエストを使って動的にそれを埋めます)、それらのカラムから値を取得することはできません。ここに私のコードがある:()関数createboxでJQuery:テーブルの列から要素を取得できません

$(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); 
} 

、にconsole.log(アイテム)は、既に私のテーブルに追加いくつかの値で満たさなければならない場合、[]を印刷します。私は間違って何をしていますか?

+2

'onreadystatechange'コールバックの前に' createBox() 'が実行されます。あなたのテーブルはこの時点で空です –

答えて

1

move 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'); 
     } 
    } 
}; 
関連する問題