JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<body>
<table id="InStrip" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>
    <button onclick=f(this)>Змінити розкраску</button>
</body>

CSS

#InStrip td, #chess td {
    width:64px; height:64px;
}
 
.style1 {
    background-color: white;
}
 
.style2 {
    background-color: black;
}

JavaScript

function onload() {
    let objTable = document.getElementById("InStrip");
    drawTable(objTable, "style1", "style2");
}
 
function drawTable(table, stl1, stl2) {
    for (let indexRow = 0; indexRow < table.rows.length; indexRow++) {
        for (let indexColumn = 0; indexColumn < table.rows[indexRow].cells.length; indexColumn++) {
            if((indexRow + indexColumn)%2 == 0) {
                table.rows[indexRow].cells[indexColumn].className = stl1;
            } else {
                table.rows[indexRow].cells[indexColumn].className = stl2;
            }
        }
    }
}
 
function f(status) {
    if(status.i) {
        status.i = 0;
        drawTable(document.getElementById("InStrip"),"style1", "style2");
    } else {
        status.i = 1;
        drawTable(document.getElementById("InStrip"),"style2", "style1");
    }
}
window.addEventListener('load',drawTable(document.getElementById("InStrip"), "style1", "style2"));