如何动态创建3列表（即瓦片列表）？

我有以下的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问题，但我看过的假设你在每一行中都有相同数量的列。

来源

2012-01-06 kristen

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

见我DEMO。我使用模板来替换表/ tr/td中的值。

来源

2012-01-06 02:54:37

这真是太棒了！谢谢！ – kristen 2012-01-06 03:25:18

再一次，这需要扩大。 – 2012-09-10 05:35:30

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

来源

2012-01-06 02:30:35

如何动态创建3列表（即瓦片列表）？

回答

相关问题