JSFiddle - React, Tailwind, and code Playground

by soumya gangamwar

HTML

<div id="newtable">

</div>

CSS

* {
  box-sizing: border-box;
}

.column : {
  float: left;
  width:33.3%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

JavaScript

var arr = [1, 2, 3, 4 ,5 , 6 ,7 ,8 , 9, 10, 11, 12]


function createTable() {

var myTableDiv = document.getElementById("newtable");
var table = document.createElement('TABLE');
table.id = "myTableDiv";
table.border = '1'
 var tableBody = document.createElement('TBODY');
 table.appendChild(tableBody);
 
for (var i = 0; i < 3; i++) {
		var tr = document.createElement('TR');
    tableBody.appendChild(tr)
    
    for (var j = 0; j < 3; j++) {
    	 var td = document.createElement('TD');
           td.width='75'
           td.id = "Cell " + i + "_" + (j+1);
           td.className ="Cellclass";
           td.appendChild(document.createTextNode("Cell"+ (j+1)))
           tr.appendChild(td);
    }
}
      
      
myTableDiv.appendChild(table)
}
console.log(createTable())

function applycolor() {
	var evenids = document.getElementById("newtable").querySelectorAll('.Cellclass');
  //evenids[0].style.backgroundColor = "red"; 
  console.log(evenids, 'evvv')
}
applycolor();

function createInput() {
}