3列テーブル（つまりタイルリスト）を動的に作成するにはどうすればよいですか？

Question

は

私は、次のJSON形式のデータを持っている：

{"mydata": [{"phone":"5456868","name":"Dave"},{"phone":"9999875","name":"Susan"}, 
{"phone":"9994058","name":"Mary"},{"phone":"9995658","name":"Jan"},  
{"phone":"3584650","name":"Yanni"},{"phone":"4512523","name":"Wendy"}, 
{"phone":"6595959","name":"Jaime"}]} 

を私は（それは基本的に3列のデータを通過し、左上から始まり、右の我々の方法を働いタイルリストを作成したいのですが表）：

Dave -5456868 | Susan-9999875 | Mary -9994058 
    Jan -9995658 | Yanni-3584650 | Wendy-4512523 
    Jaime-6595959 | 

私は、次の（粗製物）の試行を持っているが、それは非常にダイナミックではなく、またそれは、その行の最後のエントリだならば、それは正しく終了タグを追加しない...それは追加する必要があります。また、jsonのクエリのエントリ数は変わります... 1つの結果または50の結果が得られます（必ずしも7になるとは限りません）。どうも！

ダイナミックテーブルの生成に関する多くの質問がありますが、見たことは、各行に同じ数の列があることを前提としています。

Answer 1

は私のDEMOを参照してください。私はテンプレートを使ってtable/tr/tdの中の値を置き換えました。

Answer 2

私はそれをより柔軟にするためにCSSを使用して、あなたをお勧めします：

<style> 
#resultTable ul { 
    padding:0px; 
    margin:0px; 
} 
#resultTable li { 
    list-style:none; 
    width:30%; 
    float:left; 
} 
#resultTable li div { 
    border:1px solid #666666; 
} 
</style> 

<div id="resultTable"></div> 
<script> 
var data = {"mydata": [{"phone":"5456868","name":"Dave"},{"phone":"9999875","name":"Susan"}, 
{"phone":"9994058","name":"Mary"},{"phone":"9995658","name":"Jan"},  
{"phone":"3584650","name":"Yanni"},{"phone":"4512523","name":"Wendy"}, 
{"phone":"6595959","name":"Jaime"}]} 
function genTable(data){ 
    var contentData=''; 
    $.each(data.mydata,function(i,user){ 
     contentData += "<li><div>"+user.name+"-"+user.phone+"</div></li>"; 
    }); 
    $("#resultTable").html('<ul>'+contentData+'</ul>'); 
} 
genTable(data); 
</script>