JSFiddle - React, Tailwind, and code Playground

by Frank Millman

JavaScript

if (document.body.style.cssFloat == undefined)
  cssFloat = 'styleFloat';  // IE
else
  cssFloat = 'cssFloat';  // standard

document.body.style.font = '10pt Verdana,sans-serif';
document.body.style.color = 'navy';

var grid = document.createElement('div');
grid.style.marginTop = '10px';
grid.style.marginLeft = '50px';
grid.style.border = '1px solid lightgrey';
document.body.appendChild(grid);

// grid_row_onoff is a container for two children -
//   1. a blank row, to be shown if there is no data for that row
//   2. a data row, with cells, if there is data for that row
// when drawing the grid, if there is data, the first child is
//    set to 'display: none' and the second to 'display: inline-block'
//    and vice-versa if there is no data

var grid_row_onoff = add_row_onoff(grid);
add_data_row(grid_row_onoff);

var grid_row_onoff = add_row_onoff(grid);
add_data_row(grid_row_onoff);

var grid_row_onoff = add_row_onoff(grid);
add_data_row(grid_row_onoff);

var grid_row_onoff = add_row_onoff(grid);

var grid_row_onoff = add_row_onoff(grid);

// set border on one cell
grid.childNodes[1].childNodes[1].childNodes[1].childNodes[0].style.border = '2px solid black';

// in theory, grid height should be 5 rows of 21px
//grid.style.height = '105px';  // (21 * 5)

// in practice, I have to add 3px for each data row
grid.style.height = '114px';  // (21 * 5) + (3 * 3)

grid.style.width = '255px';  // (100 + 4 + 16 + 5 + 2) * 2 + 1


function add_row_onoff(grid) {
  var grid_row_onoff = document.createElement('div');
  grid.appendChild(grid_row_onoff);
  add_blank_row(grid_row_onoff);
  return grid_row_onoff;
};

function add_data_row(grid_row_onoff) {
  grid_row_onoff.childNodes[0].style.display = 'none';
  var grid_row = document.createElement('div');
  grid_row_onoff.appendChild(grid_row);
  add_grid_col(grid_row, 'hallo');
  add_grid_col(grid_row, 'goodbye');
};

function add_grid_col(grid_row, text) {
  var col_span = document.createElement('span');
 ...