如何使用JQuery从列值数组创建HTML表

Question

How to create an HTML table using JavaScript and JQuery from an array of column values in arrays when the dimensions of the table are unknown and the number of cells is not the same in each column. Eg.

[["1","4","7","10"],["2","5","8"],["3","6","9","11","12"]]

Must become:

+----+----+----+
|  1 |  2 |  3 |
+----+----+----+
|  4 |  5 |  6 |
+----+----+----+
|  7 |  8 |  9 |
+----+----+----+
| 10 |    | 12 |
+----+----+----+
|    |    | 11 |
+----+----+----+

Answer 1

$(function () {
    var cols = [["1","4","7","10"],["2","5","8"],["3","6","9","11","12"]];
    var rows = [];
    for (var y = 0; y < cols.length; y++) {
        for (var x = 0; x < cols[y].length; x++ ) {
            if (rows.length < x + 1) {
                rows.push([]);
                while (rows[x].length < y + 1) {
                    rows[x].push("");
                }
            }
            rows[x][y] = cols[y][x];
        }
    }
    var table_elem = $("<table></table>");
    for (var x = 0; x < rows.length; x++) {
        while (rows[x].length < cols.length) {
            rows[x].push("");
        }
        var row_elem = $("<tr></tr>");
        for (var y = 0; y < rows[x].length; y++) {
            var cell_elem = $("<td></td>");
            if (rows[x][y] != "") {
                cell_elem.text(rows[x][y]);
            } else {
                cell_elem.html("&nbsp;");
            }
            row_elem.append(cell_elem);
        }
        table_elem.append(row_elem);
    }
    $("body").append(table_elem);
});

Answer 2

Maybe you like this one:

        var cols = [["1","4","7","10"],["2","5","8"],["3","6","9","11","12"]];

        function mkTable(cols) {
            var table = $("<table></table>");

            for(var y=0;;y++) {
                var row = $("<tr></tr>");
                var cols_left = 0;
                for(i in cols) {
                    var col = cols[i];
                    var date = $('<td>');
                    if(col.length > y) {
                        date.append(col[y]);
                        cols_left++;
                    }
                    row.append(date);
                }
                if(!cols_left)
                    break;
                table.append(row);
            }

            $('body').append(table);
        }