Optimizing dynamic table creation: JavaScript vs. jQuery I'm on the road to prepare for the 70-480 Microsoft exam and I'm learning the basics of jQuery.

Now I wrote the following JavaScript function to create a table dynamically:

function MakeTableJavascript() {
    var rows = document.getElementById("rows").value;
    var cols = document.getElementById("cols").value;
    var placeholder = document.getElementById("placeholder");
    var table = document.createElement("table");
    table.setAttribute("border", "1");

    for (var r = 0; r &lt;= rows; r++) {
        var row = document.createElement("tr");
        for (var c = 0; c &lt; cols; c++) {
            if (r == 0) {
                var head = document.createElement("th");
                var texthead = document.createTextNode("Column " + c);

                head.appendChild(texthead);
                row.appendChild(head);
            }
            else {
                var col = document.createElement("td");
                var textrow = document.createTextNode(c.toString() + r.toString());

                col.appendChild(textrow);
                row.appendChild(col);
            }
        }
        table.appendChild(row);
    }
    placeholder.appendChild(table);
}


Then I re-wrote the same function with jQuery:

function MakeTablejQuery() {
    var rows = $('#rows').val();
    var cols = $('#cols').val();
    var placeholder = $('#placeholder').val();
    var table = document.createElement("table");

    $('table').attr("border", 1);
    for (r = 0; r &lt;= rows; rows++) {
        var row = document.createElement("tr");
        for (var c = 0; c &lt; cols; c++) {
            if (r == 0) {
                var head = document.createElement("th");
                var texthead = document.createTextNode("Column " + c);

                head.appendChild(texthead);
                row.appendChild(head);
            }
            else {
                var col = document.createElement("td");
                var textrow = document.createTextNode(c.toString() + r.toString());

                col.appendChild(textrow);
                row.appendChild(col);
            }
        }
        table.appendChild(row);
    }            
    placeholder.appendChild(table);
}


The result in term of lines of written code is practically the same.

Surely I can use jQuery in a better way to write less code, but at the actual state I have no idea on how to do so.

Can anyone more experienced in jQuery give me a suggestion to narrow the above code?
Well, how about

function MakeTablejQuery(rows, cols) {
    var table = $("&lt;table/&gt;").attr("border", 1);
    for (r = 0; r &lt; rows; r++) {
        var row = $("&lt;tr/&gt;");
        for (var c = 0; c &lt; cols; c++) {
            if (r == 0) {
                row.append($("&lt;th/&gt;").text("Column " + c))
            } else {
                row.append($("&lt;td/&gt;").text(c.toString() + r.toString()))
            }
        }
        table.append(row);
    }
    $("#placeholder").append(table);
}

MakeTablejQuery(5, 3);


And here's a more elegant version in a functional style:

Number.prototype.times = function(fn) {
    for(var r = [], i = 0; i &lt; this; i++)
        r.push(fn(i));
    return r;
}

function MakeTablejQuery(numRows, numCols) {

    var header = numCols.times(function(c) {
        return $("&lt;th/&gt;").text("Column " + c);
    });

    var row = function(r) {
        return $("&lt;tr/&gt;").append(numCols.times(function(c) {
            return $("&lt;td/&gt;").text([c, r].join(""));
        }));
    };

    return $("&lt;table/&gt;")
            .append(header)
            .append(numRows.times(row))
            .attr("border", 1);
}

$("#placeholder").append(MakeTablejQuery(5, 3));


Also, jQuery is not about "less" code, it's about more readable code - note how the last "return" statement reads almost like an english sentence.