JSFiddle - React, Tailwind, and code Playground

by Sadek Chaabene

HTML

<body>
        <input type="button" value="Change colors" onclick = "changeClors()">
         <input type="button" value="Change table" onclick = "toggleClass()">
    </body>

CSS

td {
	    border: 1px solid black;
	    border-collapse: collapse;
	    padding: 28px;
}

.t  { background: white }
.t2 { background: black }

.myTable td{
  background: gray;
}

JavaScript

function cSwap(cell){  
    if (cell.className == "t")
        cell.className = "t2";
    else if (cell.className == "t2")
        cell.className = "t";
}

function tableCreate(n) {
    var body = document.getElementsByTagName('body')[0];
    var tbl = document.createElement('table');
    tbl.setAttribute('onclick', 'cSwap(event.target)');
    for (var i = 0; i < n; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < n; j++) {
            var td = document.createElement('td');
            tr.appendChild(td)
            td.classList.add('t');
        }
        tbl.appendChild(tr);
    }
    body.appendChild(tbl);
}

function changeClors() {
    var cells = document.getElementsByTagName('td');
    for (var i = 0; i < cells.length; i++) {
        cSwap(cells[i])
    }
}
tableCreate(5);

function toggleClass(){
		var table = document.querySelector("table");
    if(table.className !== "myTable"){
    			table.className = "myTable";
    }else{
    		table.className = '';
    }
}