Creating a Table with JavaScript

Goal: using JavaScript to create a table for which you can set the parameters:

rows and columns
width and height
you can also add a border
you can delete the table
when clicking the remove table button the input values and checkbox are also reset

There is always only one table on the page: creating a second one replaces the first.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <label><input type="text" id="rows" value="2" style="font-family: Verdana; font-size: 12px; margin-left: 15px; width: 50px;">Number of rows (rows)</label>
        <label><input type="text" id="columns" value="3" style="font-family: Verdana; font-size: 12px; margin-left: 15px; width: 50px;">Number of columns (columns)</label>

        <label><input type="text" id="table-width" value="300px" style="font-family: Verdana; font-size: 12px; margin-left: 15px; width: 50px;">Table width (width)</label>
        <label><input type="text" id="table-height" value="200px" style="font-family: Verdana; font-size: 12px; margin-left: 15px; width: 50px;">Table height (height)</label>
        <p><label><input type="checkbox" id="checkbox" value="Border" style="margin-left: 15px;">Border</label></p>
        <button id="create" onclick="addTable();" style="background-color: lime; margin: 5px 15px;">Create table</button>
        <button id="destroy" onclick="destroyTable();" style="background-color: red; margin: 5px 15px;">Destroy table</button>
        <script>
            function addTable() {
                var body = document.querySelector("body"),
                    tableWidth = document.getElementById("table-width"),
                    tableHeight = document.getElementById("table-height"),
                    width = tableWidth.value,
                    height = tableHeight.value,
                    numRows = document.getElementById("rows"),
                    numColumns = document.getElementById("columns"),
                    rows = numRows.value,
                    columns = numColumns.value,
                    tr = "",
                    td = "",
                    firstTable = document.querySelector("table");
                console.log(width);
                console.log(height);
                console.log(rows);
                console.log(columns);

                var table = document.createElement("table"),
                    checkbox = document.getElementById("checkbox");
                if (checkbox.checked) {
                    table.setAttribute("border", "2px");
                } else {
                    table.setAttribute("border", "0");
                }
                table.setAttribute("width", width);
                table.setAttribute("height", height);
                for (var i = 0; i < rows; i++) {
                    tr = document.createElement("tr");
                    for (var j = 0; j < columns; j++) {
                        td = document.createElement("td");
                        var text = document.createTextNode((i + 1) + "." + (j + 1));
                        td.appendChild(text);
                        tr.appendChild(td);
                    }
                    table.appendChild(tr);
                }
                if (firstTable == null) {
                    body.appendChild(table);
                } else {
                    body.replaceChild(table, firstTable);
                }
            }

            function destroyTable() {
                var body = document.querySelector("body"),
                    table = document.querySelector("table"),
                    checkbox = document.getElementById("checkbox"),
                    tableWidth = document.getElementById("table-width"),
                    tableHeight = document.getElementById("table-height"),
                    numRows = document.getElementById("rows"),
                    numColumns = document.getElementById("columns");
                if (table) {
                    body.removeChild(table);
                    checkbox.checked = false;
                    tableWidth.value = "";
                    tableHeight.value = "";
                    numRows.value = "";
                    numColumns.value = "";
                }
            }
        </script>
    </body>
</html>

As an alternative for creating rows and columns using a string and innerHTML, you can use code like this:

for (var j = 0; j < columns; j++) {
    td += "<td>" + j + "</td>";
}
for (var i = 0; i < rows; i++) {
    tr += "<tr>" + td + "</tr>";
}
console.log(tr);
console.log(td);
table.innerHTML = tr;