jqueryダイナミックテーブルが正しくレンダリングされます

Question

jqueryが新しく、jqueryでダイナミックテーブルを表示しようとしています。私は

jQuery.each(data, function(index, value) { 
    value_split = value.slice(','); 
    for(var i=0;i<value_split.length;i++){ 
     $("#table").append("<tr><td>" + value_split[i] + "</td></tr>"); 
    } 
}); 

の下に呼び出したとき、それはカンマ区切りリストだから は、しかし、私は分割しています。私はdata becuaseスライスしてるどのように私は、通常のテーブルのように以下の行の3つのヘッダーおよび詳細を適切な形式で取得することができます

はい

First name 
Last Name 
Age 
Sam 
Don 
23 

のようなデータを取得することは、例えばオブジェクトでありますObject {headers: Array[6], values: Array[6]}

それはそうあなたが追加する値ごとに新しい行を取得します、あなたはおそらく、内部ループの外に列を作りたかった

Answer 1

を表示しないオブジェクトの申し訳ありません。

var data = [ 
 
    "Sam, Don, 23", 
 
    "Jane, Doe, 40" 
 
]; 
 

 
jQuery.each(data, function(index, value) { 
 
    var value_split = value.split(','); 
 
    var tr = $('<tr />'); 
 
    
 
    for(var i=0;i<value_split.length;i++){ 
 
     tr.append($('<td />', {text : value_split[i]})); 
 
    } 
 
    
 
    $("#table").append(tr); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr> 
 
</table>