JSFiddle - React, Tailwind, and code Playground

by Matt Sirkin

HTML

<div id="tgen">

  <body>

  </body>
</div>

CSS

.eo_product_listing_table {}

.tableizer-table tr:nth-child(even) {
  background-color: #eee;
}

.tableizer-table tr:hover {
  background-color: #d1d4ff;
}

.tableizer-table tr:nth-child(even):hover {
  /* background-color: #a5adff; */
  background-color: #d1d4ff;
}

.tableizer-table {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 2px solid #CCC;
  text-align: left;
  color: black;
}

.tableizer-table thead {
  font-weight: bold;
  text-align: left;
}

.tableizer-firstrow {
  background-color: white;
  border-collapse: separate;
  border-spacing: 5px;
  margin: 4px;
}

.tableizer-firstrow td {
  background-color: #104E8B;
  color: white !important;
  padding: 2px 4px;
  border: 2px solid #CCC;
}

JavaScript

var eo_cats = {
  para1: ["Item #"],
  para2: ["Type"],
  para3: ["Operating Temp"],
  para4: ['Dia'],
  para5: ['Length'],
  para6: ["Material"],
  para7: ["Junction"],
  para8: ["Price"],
};

var partnumpref = [
  ["NB4-CAXL-14U-12-"],
  ["A", "B", "C"], //dia
  ["A", "B", "C"], //len
  ["G", "U", "E"], //junction type
]


var paras1 = [
  ["K"],
  ["-270°C to 1372°C, –454°F to 2501°F"],
  ['1/8"', '3/16"', '1/4"'],
  ['6"', '12"', '18"'],
  ["316SS"],
  ["Grounded", "Ungrounded", "Exposed"],
  ["$51.00"],
];

//for (q = 0; q < paras1.length; q++) {
//  console.log(paras1[q]);
//}

function arrayRecursion(paras) {
  if (paras.length == 1) {
    //   console.log(paras[0])
    return paras[0];
  }
  var results = [];
  var allValues = arrayRecursion(paras.slice(1));
  for (var i = 0; i < allValues.length; i++) {
    for (var j = 0; j < paras[0].length; j++) {
      results.push(paras[0][j] + "@" + allValues[i]);
    }
  }
  return results;

}

//console.log(arrayRecursion(paras1));

function arrayRecursion2(paras) {
  if (paras.length == 1) {
    //    console.log(paras[0])
    return paras[0];
  }
  var results = [];
  var allValues = arrayRecursion2(paras.slice(1));
  for (var i = 0; i < allValues.length; i++) {
    for (var j = 0; j < paras[0].length; j++) {
      results.push(paras[0][j] + allValues[i]);
    }
  }
  return results;
}

var eopartnum = arrayRecursion2(partnumpref);

function navtoprod() {
  document.window.location = 'http://www.enviroptics.com/';
}

function generate_table(paras) {

  var sep = [];
  var res = [];
  var singarrres = arrayRecursion(paras);
  for (k = 0; k < singarrres.length; k++) {
    var str = singarrres[k];
    var res = str.split("@");
    sep.push(res);
  }
  //console.log(sep);


  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];

  // creates a <table> <thead> <tbody> elements
  var tbl = document.createElement("table");
  var tblHead = document.createElement("thead");
  var...