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）。 THX！

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问题，但我看到的那些问题假设每行中的列数相同。

Answer 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>

Answer 2

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

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

2 个答案: