JSFiddle - React, Tailwind, and code Playground

by richbuff

HTML

<body>
        <table class="grid" id="grid">
        </table>
</body>

CSS

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px dotted #ccc;
    text-align:center;
    font-family:sans-serif; font-size:16px
}
.grid td.clicked {
    background-color:red;
}

JavaScript

grid();

    $("#grid td").click(function()
    {
        alert("Clicked!");
        $(this).addClass("clicked");
    });

function grid()
{
    var grid = document.getElementById("grid");

    for(var r = 0; r<18; r++)
    {
        var tr = grid.appendChild(document.createElement('tr'));

        for(var c = 0; c<18; c++)
        {
            var cell = tr.appendChild(document.createElement('td'));
        }
    }    
}