JSFiddle - React, Tailwind, and code Playground

by David Thomas

CSS

/*
table {
    empty-cells: show;
}
td {
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border: 1px solid #000;
}
tbody tr:nth-child(odd) td:nth-child(even), tbody tr:nth-child(even) td:nth-child(odd) {
    color: #fff;
    background-color: #00f;
}
tbody tr:nth-child(even) td:nth-child(even), tbody tr:nth-child(odd) td:nth-child(odd) {
    background-color: #999;
}
tbody {
    counter-reset: rowNumber;
}
tr {
    counter-increment: rowNumber;
    counter-reset: cellNumber;
}
td {
    counter-increment: cellNumber;
}
td::before {
    content: counter(rowNumber, upper-alpha) counter(cellNumber, decimal);
}
*/

.odd .odd,
.even .even {
    color: #fff;
    background-color: #00f;
}

.even .odd,
.odd .even {
    background-color: #ccc;
}

JavaScript

var chess = {
    createBoard: function (dimension) {
        if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
            return false;
        } else {
            dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
            var table = document.createElement('table'),
                tbody = document.createElement('tbody'),
                row = document.createElement('tr'),
                cell = document.createElement('td'),
                rowClone,
                cellClone;
            table.appendChild(tbody);
            for (var r = 0; r < dimension; r++) {
                rowClone = row.cloneNode(true);
                tbody.appendChild(rowClone);
                for (var c = 0; c < dimension; c++) {
                    cellClone = cell.cloneNode(true);
                    rowClone.appendChild(cellClone);
                }
            }
            document.body.appendChild(table);
            chess.enumerateBoard(table);
        }
    },
    enumerateBoard : function (board) {
        var rows = board.getElementsByTagName('tr'),
            text = document.createTextNode(),
            rowCounter,
            len,
            cells;
        for (var r = 0, size = rows.length; r<size; r++){
            rowCounter = String.fromCharCode(65 + r);
            cells  = rows[r].getElementsByTagName('td');
            len = cells.length;
            rows[r].className = r%2 == 0 ? 'even' : 'odd';
            for (var i = 0; i<len; i++){
                cells[i].className = i%2 == 0 ? 'even' : 'odd';
                cells[i].appendChild(text.cloneNode());
                cells[i].firstChild.nodeValue = rowCounter + i;
            }
        }
    }
};

chess.createBoard(10);