How to create an HTML table with JQuery from an array of column values

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 |
+----+----+----+

nettux · Accepted Answer · 2014-05-07 10:56:28Z

2

$(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);
});

edited May 7, 2014 at 10:56

answered May 6, 2014 at 11:45

nettux

5,4444 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nettux Over a year ago

I meant to answer. I spent a while wrestling with this so I thought I'd share it.

Joeytje50 Over a year ago

@PhistucK the reason he didn't already is because there's a 10 minute delay before you can accept an answer. Perhaps this delay is longer for self-answered questions even.

nettux Over a year ago

@PhistucK that's the plan! but it seems you have to wait 2 days to accept an answer that you've posted on your own question. Additionally although this solution is adequate for me, I'd be open to improvements and alternatives.

fast · Accepted Answer · 2014-05-07 10:18:59Z

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

Collectives™ on Stack Overflow

How to create an HTML table with JQuery from an array of column values

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related