JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id = "wrapper">
    <table></table>
    <button>Change</button>
</div>

CSS

table{margin:15px;}

td{
    width: 30px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
}

.tr1 {border-top: 3px solid black;}
.tr4 {border-top: 3px solid black;}
.tr6 {border-bottom: 3px solid black;}
.tr9 {border-bottom: 3px solid black;}

tr {border-left: 3px solid black;
    border-right: 3px solid black; 
}

.td3 {border-right: 3px solid black;}
.td6 {border-right: 3px solid black;}

JavaScript

var table = [],
    Numbers = [],
    max = 8,
    min = 0,
    n = 0,
    randTd, randSq, first = 0,
    second = 1,
    third = 2;

//Drawing a greed
for (i = 1; i < 10; i++) {
    $('table').append('<tr class = "tr' + i + '"></tr>');
    for (j = 1; j < 10; j++) {
        $('.tr' + i).append('<td class = "td' + j + '"></td>');
    }
}

//Fill array from 1 to 9
for (i = 0; i < 9; i++) {
    Numbers[i] = i + 1;
}

for (ii = 0; ii < max; ii++) {
    table[ii] = [[, , ], [, , ], [, , ]];
}

function getRandTd() {
    randTd = Math.floor(Math.random() * 3);
    return randTd;
}

function getRandSq() {
    randSq = Math.floor(Math.random() * 3);
    return randSq;
}
//filling  first row
while (n < 9) {
    getRandSq();
    getRandTd();
    if (table[0][randSq][randTd] === undefined) {
        table[0][randSq][randTd] = Numbers[n];
        n++;
    }
}

//filling second row
n = 0;

//while(n < 9){
for (y = 0; y < 100; y++) {
    getRandSq();
    getRandTd();
    if (table[second][randSq][randTd] === undefined && Numbers[n] != table[first][randSq][0] && Numbers[n] != table[first][randSq][1] && Numbers[n] != table[first][randSq][2]) {
        table[second][randSq][randTd] = Numbers[n];
        n++;
    }
}

//filling third row
n = 0;
for (y3 = 0; y3 < 100; y3++) {
    getRandSq();
    getRandTd();
    if (table[third][randSq][randTd] === undefined && Numbers[n] != table[first][randSq][0] && Numbers[n] != table[first][randSq][1] && Numbers[n] != table[first][randSq][2] && Numbers[n] != table[second][randSq][0] && Numbers[n] != table[second][randSq][1] && Numbers[n] != table[second][randSq][2]) {
        table[third][randSq][randTd] = Numbers[n];
        n++;
    }
}
//filling fourth row
n = 0;
for (y4 = 0; y4 < 50; y4++) {
    getRandSq();
    getRandTd();
    if (table[3][randSq][randTd] === undefined && Numbers[n] != table[first][randSq][randTd] && Numbers[n] != table[second][randSq][randTd] && Numbers[n] != table[third][randSq][randTd]) {
       ...