JSFiddle - React, Tailwind, and code Playground

by matteosistisette

HTML

<table id="ojoD"></table>

<table id="ojoI"></table>

<table id="boca"></table>

CSS

body {
    padding:0;
}

table {
    border-collapse: separate;
}

#ojoD {
    border: thin solid black;
    position: absolute;
    top:40px;
    left:40px;
    width: 50px;
    height: 50px;
}


#ojoI {
    border: thin solid black;
    position: absolute;
    top:40px;
    left:120px;
    width: 50px;
    height: 50px;
}

#boca {
    border: thin solid black;
    position: absolute;
    top:170px;
    left:40px;
    width: 170px;
    height: 50px;
}

JavaScript

$(document).ready(function() {
    
    
    $("table").each(function() {
        rellenarConColores($(this));
    });
    
    

});

function rellenarConColores(tabla) {

    var NLINEAS = 5;
    var NCOLUMNAS = 5;
    for (var l = 0; l < NLINEAS; l++) {

        var nuevalinea = $("<tr></tr>");
        tabla.append(nuevalinea);

        for (var c = 0; c < NCOLUMNAS; c++) {
            var nuevacelda = $("<td></td>");
            var nuevocolor = colorAleatorio();
            nuevacelda.css("background-color", nuevocolor);
            nuevalinea.append(nuevacelda);
        }
    }
}


function colorAleatorio() {

    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}