Question

我有一个问题，我有一个字符串数组（即图像网址）从ajax回调回来，我需要将图像渲染到一个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('')
}

DEMO：http://jsfiddle.net/VTLBF/2

Answer 2

你能试试吗？

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

Answer 3

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

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

请检查以下问题：

Can jQuery template bind to a raw array?

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

并且不要忘记查看jquery tmpl文档以获取更多信息。

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

3 个答案: