如何动态创建3列表(即图块列表)? [英] How can I create a 3 column table (ie a tile list) dynamically?

问题描述

我有以下json格式的数据:

I have the following json-formatted 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"}]}

我想遍历数据并创建一个从左上方开始并一直向右工作的图块列表(本质上是3列表):

I'd like to go through the data and create a tile-list starting at the top-left and working our way right (it's essentially a 3 column table):

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

我进行了以下(粗略的)尝试，但它不是很动态，也没有正确添加结束标记...如果它是该行的最后一个条目，则应添加.另外，我们的json查询中的条目数会有所不同...我们可能会得到1个结果或50个结果...(不一定总是7个).谢谢！

I have the following (crude) attempt but it isn't very dynamic, nor does it add the closing tag correctly...it should add if it's the last entry for that row. Also, the number of entries in our json query will vary...we could get 1 result or 50...(it's not always going to be 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问题，但是我所看到的假设您假设每行中的列数相同.

There's a number of SO questions regarding dynamic table generation, but the ones I've seen assume you have the same number of columns in each row.

推荐答案

请参阅我的 DEMO .我使用模板替换了table/tr/td中的值.

See my DEMO. I used templates to replace the values inside the table/tr/td.

这篇关于如何动态创建3列表(即图块列表)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！