jQuery Dynamic Table 2

by Alvin Olavarrieta

HTML

<input type="text" value="5" id="rows" />
<input type="text" value="5" id="cols" />
<div id="placeholderJavaScript"></div>
<br />
<div id="placeholderjQuery"></div>

CSS

#placeholderJavaScript * {
    border: 1px solid green;
}
#placeholderjQuery * {
    border: 1px solid blue;
}

JavaScript

function MakeTablejQuery() {
    var rows = $('#rows').val(), row;
    var cols = $('#cols').val();
    var table = $("<table>").attr("border", "1");

    for (var r = 0; r <= rows; r++) {
        table.append(row = $("<tr>"));
        for (var c = 0; c < cols; c++) {
            row.append($(r ? "<td>" : "<th>").text(r ? c + "" + r : "Column " + c));
        }
    }
    $('#placeholderjQuery').append(table);
}

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

    for (var r = 0; r <= rows; r++) {
        var row = document.createElement("tr");
        for (var c = 0; c < 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);
}

MakeTableJavascript();
MakeTablejQuery();