JSFiddle - React, Tailwind, and code Playground

HTML

<table id="base">
    <tbody></tbody>
</table>

CSS

td {
    padding: 10px;
    cursor: pointer;
}
.blue {
    background-color: #c55;
    color: white;
}

JavaScript

var base = document.getElementById('base'),
    tbody = base.getElementsByTagName('tbody')[0],
    numrows = 30,
    numcols = 10,
    col = 0,
    row = "<tr>{row}</tr>",
    rows = "",
    cell = "<td>{cell}</td>",
    cells = "";

// Remember el.attachEvent('onclick', ...) for IE8 and lower
base.addEventListener('click', function delegate(e){
    var cells = tbody.getElementsByClassName('blue'),
        i = 0,
        cell;
    
    while (cell = cells[i++]) {
        cell.className = cell.className.replace(/\bblue\b/g, '');
    }
    
    e.target.className += ' blue';
});

while (numrows--) {
    cells = "";
    col = 0;
    
    while (col++ < numcols) {
        cells += cell.replace('{cell}', col);
    }
    
    rows += row.replace('{row}', cells);
}

tbody.innerHTML = rows;