使用Javascript / jQuery，將列表呈現到表格中的最優雅的方法是什么？

Question

我有一個問題，我有一個從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(""));

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

你可以試試這個嗎？

演示

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這樣的模板插件。

使用它，您可以通過給它一個數組來繪制整個表或任何您想要的東西，或者您可以使用來自服務器的數據傳遞給JSON。

請檢查以下問題：

jQuery模板可以綁定到原始數​​組嗎？

如何將jQuery.tmpl模板呈現為字符串？

並且不要忘記查看jquery tmpl文檔以了解更多信息。