如何动态创建3列表（即图块列表）？

我有以下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"}]} 

我想查看数据并从左上角开始创建一个tile-list并按照我们正确的方式工作（它基本上是一个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=""+""+user.name+"-"+user.phone+""; } if(i==1 || i==4 || i==7){ var tblRow=""+user.name+"-"+user.phone+""; } if(i==2 || i==5 || i==8){ var tblRow=""+user.name+"-"+user.phone+""+""; } $(tblRow).appendTo("#table> tbody"); }); } 

关于动态表生成有很多SO问题，但我看到的那些问题假设你在每一行中都有相同数量的列。

Answer 1

看我的演讲 。 我使用模板替换表/ tr / td中的值。

Answer 2

我建议你使用CSS使其更灵活：