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

Question

我有一个问题，我有一个从ajax回调返回的字符串数组(即图像urls)，我需要将图像呈现到一个html表中。问题是，我当然不知道列表的长度，但我需要始终呈现一个包含6列的表。构建表(然后填充单元格或动态构建表)更好(遍历下面每个.each语句中的列数)。第二个看起来更有活力，但不是很优雅。

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(""));

Answer 1

我通常做的是创建一个辅助函数，如果需要的话，将额外的元素填充到最后一行。

您可以通过比较项目的数量和每行项目的模数来获得所需的数量。我使用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('')
}

演示：http://jsfiddle.net/VTLBF/2

Answer 2

你能试试这个吗？

DEMO

https://code.google.com/p/html5shiv/

还有这个，只使用<p>的

@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;
  }
}

Answer 3

我认为一个好的方法(也许是最好的)是使用像jquery tmpl这样的模板插件。

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

请检查以下问题：

Can jQuery template bind to a raw array?

How do I render a jQuery.tmpl Template to a String?

另外，不要忘记查看jquery tmpl文档以获取更多信息。