JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="table_content"></div>
<button id="button_revers">Сменить цвет</button>
</body>

CSS

.fill_black {
            background-color: #000;
        }
#table_content {
            padding: 10px;
        }

JavaScript

function createNode(name, klasses) {
    var n = document.createElement(name);
    n.className = klasses;
    return n;
}

function l(x) {
    console.log(x);
}

function hasClass(node, klass) {
    if (!('className' in node)) {
        return false;
    }
    return node.className.split(' ').indexOf(klass) > -1;
}

function addClass(node, klass) {
    if (!hasClass(node, klass)) {
        node.className += ' ' + klass;
    }
}

function removeClass(node, klass) {
    if (hasClass(node, klass)) {
        node.className = node.className.split(klass).join('');
    }
}

function create_table(columnCount, rowCount, border, tbHeight, tdWidth) {
    var target = document.getElementById('table_content');
    var table = document.createElement('table');
    table.id = 'table';
    for (var i = 0; i < rowCount; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < columnCount; j++) {
            var column = document.createElement('td');
            column.height = tbHeight;
            column.width = tdWidth;
            row.appendChild(column);
        }
        row.style.borderColor = 'black';
        table.appendChild(row);
    }
    table.border = border;
    target.appendChild(table);
}


create_table(5, 6, '1', 25, 25);

document.getElementById('table').onclick = function(event) {
    var target = event.target;
    if (target.tagName == 'TD') {
        (hasClass(target, 'fill_black')) ? removeClass(target, 'fill_black'): addClass(target, 'fill_black');
    }
};

document.getElementById('button_revers').onclick = function(event) {
    var table = document.getElementById('table');
    (hasClass(table, 'fill_black')) ? removeClass(table, 'fill_black'): addClass(table, 'fill_black');
}