jQueryがJSONデータをテーブルに追加しても間違った場所に配置される

Question

私はAPIから取得したJSONデータを使用してテーブルを作成したいが、jQueryは間違った場所に要素を置いている....

これは私のjQueryのコードです：

var container = $("#container"); 
var table = $("#table"); 

$(document).ready(function() { 
    callAPI(); 
}); 

function callAPI() { 
    $.ajax({ 
     url: "action-api.php", 
     method: "GET", 
     dataType: 'json', 
     success: function(data) { 
      console.log(data); 
      container.append('<table style="width:100%"><tr><th>ID</th><th>Naam</th> <th>Brouwerij</th><th>Type</th><th>Gisting</th><th>Percentage</th><th>Inkoop Prijs</th></tr>'); 

      $.each(data, function(i, item) { 
       container.append('<tr><td>' + item.id + '</td>'); 
       container.append('<td>' + item.naam + '</td>'); 
       container.append('<td>' + item.brouwerij + '</td>'); 
       container.append('<td>' + item.type + '</td>'); 
       container.append('<td>' + item.gisting + '</td>'); 
       container.append('<td>' + item.perc + '</td>'); 
       container.append('<td>' + item.inkoop_prijs + '</td></tr>'); 
      }); 

      container.append('</table>'); 
     }, 
    }); 
} 

これは、HTML出力である：

Answer 1

あなたはを作成するためにきましたと行trあなたが行うときtdの分離、他の彼らは例えば、追記後に自動的に閉じられます。

container.append('<tr><td>' + item.id + '</td>'); 

出力は次のようになります。

<tr><td>item.id</td></tr> 
____________________^^^^^ //NOTE the closed tag will be added automatically 

あなただけに持っているので、

var table = $('<table style="width:100%"></table>'); 

table.append('<tr><th>ID</th><th>Naam</th> <th>Brouwerij</th><th>Type</th><th>Gisting</th><th>Percentage</th><th>Inkoop Prijs</th></tr>'); 

$.each(data, function(i, item) { 
    var tr = $('<tr/>'); 

    tr.append('<td>' + item.id + '</td>'); 
    tr.append('<td>' + item.naam + '</td>'); 
    tr.append('<td>' + item.brouwerij + '</td>'); 
    tr.append('<td>' + item.type + '</td>'); 
    tr.append('<td>' + item.gisting + '</td>'); 
    tr.append('<td>' + item.perc + '</td>'); 
    tr.append('<td>' + item.inkoop_prijs + '</td>'); 

    table.append(tr); 
}); 

container.append(table); 

希望します。

Answer 2

それとも、ただあなたの全体のブロックを作成し、それを追加することができます：ここで

var container = $("#container"); 
var table = $("#table"); 

$(document).ready(function() { 
    callAPI(); 
}); 

function callAPI() { 

    $.ajax({ 
     url: "action-api.php", 
     method: "GET", 
     dataType: 'json', 
     success: function(data) { 
      console.log(data); 
      var html = '<table style="width:100%"><tr><th>ID</th><th>Naam</th> <th>Brouwerij</th><th>Type</th><th>Gisting</th><th>Percentage</th><th>Inkoop Prijs</th></tr>'; 

      $.each(data, function(i, item) { 
       html+='<tr><td>' + item.id + '</td>'; 
       html+='<td>' + item.naam + '</td>'; 
       html+='<td>' + item.brouwerij + '</td>'; 
       ... 
      }); 

      html+='</table>'; 
      container.append(html); 
     }, 
    }); 
} 

は、このための説明です：How do I force jQuery append to NOT automatically close a tag?