JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<form>
  <label> Min:
    <input type="text" value="160" id="min" />
  </label>
  <label>Max:
    <input type="text" value="300" id="max" />
  </label>
  <button type="button" id='filter' onclick="return updateFilter( get('min').value, get('max').value );">Filter</button>
  <input type="reset" value="reset" onclick="return form_reset();" />
</form>
<table id="historyTable">
  <thead>
    <tr>
      <th>Game #</th>
      <th>Date</th>
      <th>Location</th>
      <th>Score</th>
      <th>Strikes</th>
      <th>Spares</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>299</td>
      <td>29 Feb 2016</td>
      <td>Hello World Bowling Alley</td>
      <td>202</td>
      <td>6</td>
      <td>1</td>
    </tr>
    <tr>
      <td>299</td>
      <td>29 Feb 2016</td>
      <td>Hello World Bowling Alley</td>
      <td>150</td>
      <td>6</td>
      <td>2</td>
    </tr>
    <tr>
      <td>299</td>
      <td>29 Feb 2016</td>
      <td>Hello World Bowling Alley</td>
      <td>175</td>
      <td>6</td>
      <td>3</td>
    </tr>
    <tr>
      <td>299</td>
      <td>29 Feb 2016</td>
      <td>Hello World Bowling Alley</td>
      <td>90</td>
      <td>6</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
<div id="output"></div>

JavaScript

console.clear();

var hidden = {};

window.get = function(id) {
  return document.getElementById(id);
};

window.updateFilter = function(min, max) {
  var table  = get('historyTable'),
      rows   = table.tBodies[0].rows,
      fields = { score: 3  };

  for (var i = 0, n = rows.length; i < n; i++) {
    var scoreCheck = +rows[i].cells[fields.score].innerText;
    if (scoreCheck < min || scoreCheck > max) {
      hidden[i] = rows[i];
      rows[i].style.display = 'none';
    } else {
      if (hidden.hasOwnProperty(i)) {
        hidden['' + i].style.display = '';
        delete hidden[i];
      }
    }
  }

  return false;
}

window.form_reset = function() {
  Object.keys(hidden).forEach(function(row) {
    hidden[row].style.display = '';
  });
  return true;
};


(function randomData() {
  var table  = get('historyTable'),
      rows   = table.tBodies[0].rows,
      fields = {};
  ['game', 'date', 'location', 'score', 'strikes', 'spares'].forEach(function(field, ndx) {
    fields[field] = ndx;
  });

  var newRows = getRandomInt(5, 20); // 5 to 20 new rows

  for (var i = 0; i < newRows; i++) {
    var last_row = rows[rows.length - 1];
    var new_row = table.insertRow(rows.length + 1);
    // create cells
    Object.keys(fields).forEach(function(field) {
      new_row.insertCell(fields[field]).appendChild(text(''));
    });

    /* This logic isn't correct, it's just play data with some hint at realism */
    new_row.cells[fields.game].innerText = +last_row.cells[fields.game].innerText + 1;
    var dt = new Date();
    dt.setDate(dt.getDate() - getRandomInt(0, 30));
    new_row.cells[fields.date].innerText = dt.toISOString().slice(0, 10);
    new_row.cells[fields.score].innerText = getRandomInt(0, 300);
    new_row.cells[fields.strikes].innerText = +new_row.cells[fields.score].innerText == 300 ? 12 : getRandomInt(0, 10);
    new_row.cells[fields.spares].innerText =
      getRandomInt(0, 12 - +new_row.cells[fields.strikes].innerText);
   ...