JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<form id="theForm">
    <labeL>Rows ranging from</labeL>
    <input name="rLow" />
    <labeL>through</labeL>
    <input name="rHigh" />
    <labeL>Columns ranging from</labeL>
    <input name="cLow" />
    <labeL>through</labeL>
    <input name="cHigh" />
    <br/>
    <input type="button" name="go" value="Generate table" />
</form>
<br/>
<br/>
<div id="result"></div>

CSS

#theTable {
    color:black;
}
#theTable tbody tr td {
    width: 32px;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}
#theTable, #theTable tbody tr th, #theTable tbody tr td {
    border:1px solid black;
    border-collapse: collapse;
}
#theTable tbody tr:first-child td, #theTable tbody tr td:first-child {
    background-color: black;
    color: white;
}
#theTable tbody tr:first-child td:first-child {
    visibility: hidden;
}

JavaScript

var form = document.getElementById("theForm");
form.go.onclick = function () {
    var row, col;
    var rL = parseInt(form.rLow.value);
    var rH = parseInt(form.rHigh.value);
    var cL = parseInt(form.cLow.value);
    var cH = parseInt(form.cHigh.value);
    if (isNaN(rL) || isNaN(rH) || isNaN(cL) || isNaN(cH)) {
        return;
    }

    var rows = rH - rL + 1;
    var cols = cH - cL + 1;
    if (rows < 3 || rows > 50 || cols < 3 || cols > 20) {
        return;
    }

    var div = document.getElementById("result");
    // if we had a table before, get rid of it
    if (div.firstChild != null) {
        div.removeChild(div.firstChild);
    }

    var tbl = document.createElement("table");
    tbl.id = "theTable";

    row = tbl.insertRow();
    row.insertCell(); // blank top left cell
    for (var c = cL; c <= cH; ++c) {
        col = row.insertCell();
        col.innerHTML = c;
    }

    for (var r = rL; r <= rH; ++r) {
        row = tbl.insertRow();
        col = row.insertCell();
        col.innerHTML = r;
        for (var c = cL; c <= cH; ++c) {
            var col = row.insertCell();
            col.innerHTML = r * c;
        }
    }
    div.appendChild(tbl);
}