JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div id="table">

</div>

CSS

td {
  border: 1px solid black;
  empty-cells: hide;
}

JavaScript

//add 
tableSample();
let t = document.getElementsByTagName("tr");
/* alert(t.length); //6 */

for (let i = 0; i < t.length; i++){
	if(t[i].cells[0].innerHTML == ""){
  	console.log(1);
  	t[i].style = "display: none";
  }
	console.log(t[i].cells[0]);
}

t[0].addEventListener("click", function() {
  alert(1);
});



function tableSample() {
  let table = "";
  let data = ["this", "is", "first", "row"];
  let subData = ["this", "is", "second", "row"];

  table += "<table id='x' cellspacing=0>";
  table += createRow(data, 0);
  table += createRow(data, 1);
  table += createRow(data, 1);
  table += createRow(data, 1);
  table += createRow(data, 0);
  table += createRow(data, 1);
  table += "</table>";

  document.getElementById("table").innerHTML = table;
}

function createRow(data, rowSublevel) {
  let row = "<tr>";
  row += emptyCells(rowSublevel);
  for (let i = 0; i < data.length; i++) {
    row += "<td>" + data[i] + "</td>";
  }
  return row;
}

function emptyCells(rowSublevel) {
  let cells = "";
  for (let i = 0; i < rowSublevel; i++) {
    cells += "<td></td>";
  }
  return cells;
}