JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<div id="box"></div>

CSS

table {
    width:200px;
    height:200px;
    color:green;
}
table td {
    padding:2px;
    margin:2px;
    border:2px solid #ccc;
}
body {
    background-color:wthie;
}

JavaScript

$(function () {
    createTable(7, 4);

    function createTable(rows, cols) {
        var $body = $('body'),
            mytable = $('<table></table>').attr({
                id: "Tabela1"
            }),
            r = 255,
            g = 255,
            b = 255,
            i, $row;
        for (i = 0; i < rows; i++) {
            $row = $('<tr></tr>').appendTo(mytable).attr({
                id: i + 1
            });
            for (var j = 0; j < cols; j++) {
                $('<td></td>', {
                    text: "rgb(" + r + "," + g + "," + b + ")",
                    id: j + 1,
                    css: {
                        "background-color": 'rgb(' + r + ',' + g + ',' + b + ')'
                    }
                }).appendTo($row);
                g -= 30;
            }
            g = 255;
            r -= ((i / 3) < 1) ? 43 : 42;
        }
        mytable.appendTo("#box");
        mytable.find('td').on('click mouseover mouseleave', function (e) {
            var $t = $(this),
                color = $t.text();
            switch (e.type) {
                case 'click':
                    $body.css({
                        'background-color': color
                    });
                    break;
                case 'mouseover':
                    $t.css({
                        'background-color': 'black',
                        color: color
                    });
                    break;
                case 'mouseleave':
                    $t.css({
                        'background-color': color,
                        color: 'green'
                    });
                    break;
            }
        });
    }

});