JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="main"></div>

CSS

table { 
    border-spacing: 0px;
    border-collapse: collapse;
}
table tr td {
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
}
table tr td span {
  display: block;
  height: 30px;
  width: 30px;
    cursor: pointer;
}

JavaScript

function createTable(cols, rows) {
    var table = "<table>";
    if (cols >= 0 && rows >= 0) {
        for(var i = 0;i<cols;i++) {
            table += "<tr>";
            for(var j = 0;j<rows;j++) {
                table += "<td>";
                    table += "<span class='case'>";
                        table += parseInt(i+""+j)+1;
                    table += "</span>";
                table += "</td>";
            }
            table += "</tr>";
        }
    }
    table += "</table>";
    return table;
}
$("#main").html(createTable(10, 10));

$(".case").on("click", function(){
    //alert($(this).text());
    
    clicked($(this))
});

function clicked(elt) {
    elt.css("cursor","default").off().text("");
}