0

我有一个问题，我有一个从 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(""));
4

3 回答 3

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

于 2013-03-16T13:18:53.930 回答
0

你能试试这个吗？

演示

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;
  }
}
于 2013-03-16T12:00:43.620 回答
0

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

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

请检查以下问题：

jQuery 模板可以绑定到原始数​​组吗？

如何将 jQuery.tmpl 模板呈现为字符串？

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

于 2013-03-16T12:03:57.890 回答