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

Question

I have an issue where I have an array of strings (that are image urls) coming back from an ajax callback and I need to render the images into a html table. The issue is that I don't know the length of the list of course but I need to render a table with 6 columns always. Is it better to build up the table ( and then fill in the cells or build up the table on the fly (loop through number of columns within each .each statements below). The second one seems more dynamic but not very elegant.

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

What I normally do is create a helper function to pad the additional elements to last row if needed.

You can get the number needed by comparing number of items to modulus of items per row. I use slice to create each row of data

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

Can you try this?

DEMO

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

and this, using only <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

I think a good way(maybe be the best) is to use templating plugin like jquery tmpl .

With using it you can draw an entire table or anything you want just by giving it an array or you can pass to is JSON with your data coming from server.

Kindly check these questions :

Can jQuery template bind to a raw array?

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

and don't forget to check the jquery tmpl documentation for more information.