2012-01-06 50 views
0

我有以下的JSON格式的數據:如何動態創建3列表(即瓦片列表)?

{"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)。謝謝!

function(data){ 
    $.each(data.mydata,function(i,user){ 

    if(i==0 || i==3 || i==6){ 
var tblRow="<tr>"+"<td>"+user.name+"-"+user.phone+"</td>"; 
} 
if(i==1 || i==4 || i==7){ 
var tblRow="<td>"+user.name+"-"+user.phone+"</td>"; 
} 
if(i==2 || i==5 || i==8){ 
var tblRow="<td>"+user.name+"-"+user.phone+"</td>"+"</tr>"; 
} 
    $(tblRow).appendTo("#table> tbody"); 

}); 

     } 

有很多關於動態表生成的SO問題,但我看過的假設你在每一行中都有相同數量的列。

+0

使用modulo ..... – Robin 2012-01-06 02:13:47

回答

1

見我DEMO。我使用模板來替換表/ tr/td中的值。

+0

這真是太棒了!謝謝! – kristen 2012-01-06 03:25:18

+0

再一次,這需要擴大。 – 2012-09-10 05:35:30

1

我會使用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>