使用 Javascript / jQuery，将列表呈现为表格的最优雅方式是什么？答案

【问题标题】：Using Javascript / jQuery, what is the most elegant way to render a list into a table?使用 Javascript / jQuery，将列表呈现为表格的最优雅方式是什么？
【发布时间】：2013-03-05 03:20:24
【问题描述】：

我有一个问题，我有一个从 ajax 回调返回的字符串数组（即图像 url），我需要将图像渲染到 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(""));

【问题讨论】：

您所做的是一种快速的方法。只更新一次 DOM
您不需要将保存在数组中，稍后再加入。

PS 如果图像宽度相同，响应式方法是使用 CSS3 并将其分成 6 列。 @Ings：重要的是字符串连接还是数组推送？

@mplungian 它们大小相同。 .我需要支持 IE7 浏览器，所以我认为我不能真正依赖 CSS3

可以使用垫片。我很乐意在所有浏览器上使用它，但无法在 IE7 中测试它

标签： javascript jquery html-table

【解决方案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

【讨论】：

【解决方案2】：

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

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

请检查这些问题：

Can jQuery template bind to a raw array?

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

别忘了查看jquery tmpl 文档以获取更多信息。

【讨论】：

我发现为这么小的事情做模板的开销很大。在我看来，它还增加了复杂性而不是加快速度
@mplungjan 你是对的..我只是想提供新的选择，我认为值得学习

【解决方案3】：

你可以试试这个吗？

DEMO

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

这个，只使用<p>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;
  }
}

【讨论】：