使用Javascript/jQuery，将列表呈现到表中最优雅的方式是什么？

我有一个问题，我有一个字符串数组（即图像URL）从ajax回调返回，我需要将图像呈现到html表中。问题是我当然不知道列表的长度，但我需要始终呈现一个包含6列的表。构建表格（然后填充单元格或动态构建表格（循环遍历每个

语句中的列数。下面的每个
语句）是否更好。第二个看起来更动态，但不是很优雅

var tableHTML = [];
tableHTML.push("<table>");

$.each(data.ImageURLs, function(index, imageURL) {

    // create table content
    if (index % 1 == 0) {
        tableHTML.push("<tr>");
    }
    tableHTML.push("<td>" + imageURL + "</td>");

    if (index % 6 == 0) {
        tableHTML.push("</tr");
    }
});

tableHTML.push("</table>");
$("#myTable").html(tableHTML.join(""));

var tableHTML=[]；
tableHTML.push（“”）；
$.each（data.imageURL，函数（索引，imageURL）{
//创建表内容
如果（索引%1==0）{
tableHTML.push（“”）；
}
tableHTML.push（“+imageURL+”）；
如果（索引%6==0）{
tableHTML.push（“你能试试这个吗



而这只需要使用
s

@media only screen and (min-width: 740px) {
  #multicolumn { 
    column-count:6; 
    column-gap: 10px; 

    -webkit-column-count: 6; 
    -webkit-column-gap: 10px;

    -moz-column-count: 6;
    -moz-column-gap: 10px;
  }      
  p:first-of-type {
    margin-top:0 !important;
  }
}

我认为一个好的方法（也许是最好的）是使用模板插件

使用它，您可以绘制整个表或任何您想要的东西，只需给它一个数组，或者您可以将来自服务器的数据传递给is JSON

请检查以下问题：



不要忘记查看文档以了解更多信息。
如果需要，我通常会创建一个helper函数，将其他元素填充到最后一行

您可以通过将项目数量与每行项目的模数进行比较来获得所需的数量。我使用
slice
创建每行数据

var items_per_row = 6;

var tableHTML = ['<table border="1">'];
var num_items = data.length;



for (j = 0; j < num_items; j = j + items_per_row) {
    var rowEnd = j + items_per_row;
    var rowData = data.slice(j, rowEnd);

    tableHTML.push('<tr>');
    $.each(rowData, function (idx, item) {
        tableHTML.push('<td>' + item + '</td>')
    });
    /* pad last row if needed */
    if (rowEnd > num_items) {
        tableHTML.push(emptyCells(num_items, items_per_row));
    }
    tableHTML.push('</tr>');

}


tableHTML.push("</table>");

function emptyCells(num_items, items_per_row) {
    var qty = items_per_row - (num_items % items_per_row);

    var cells = [];
    for (i = 0; i < qty; i++) {
        cells.push('<td class="empty">Empty</td>')
    }

    return cells.join('')
}

var项目每行=6；
var tableHTML=['']；
var num_items=data.length；
对于（j=0；j项目数）{
tableHTML.push（清空单元格（num_items，items_/行））；
}
tableHTML.push（“”）；
}
tableHTML.push（“”）；
函数emptyCells（项目数、每行项目数）{
var数量=每行项目数-（每行项目数%）；
var单元格=[]；
对于（i=0；i

演示：
你所做的是一种快速的方法。只需在你不需要保留在数组中并在以后加入它时更新DOM。PS如果图像的宽度相同，一种响应方式是使用CSS3并将其放入6列。@Ings:字符串连接或数组推送有关系吗？@mplungian它们的大小相同。我需要支持IE7浏览器，所以我我想我不能真正依靠CSS3，你可以用一个垫片。我很高兴在所有浏览器上使用它，但没有能够在IE7中测试它。我发现为这样一件小事模板化会带来巨大的开销。而且它增加了复杂性，而不是加快了我的工作速度opinion@mplungjan你说得对。我只是想提供新的选择，我认为这是值得的第三次学习