<!-- 2017, Raziur Rahman.

This is a little project that filters out a table of data based on text input. Although it was coded from scratch but this work is  somewhat inspired by a w3shcool's how-to: https://www.w3schools.com/howto/howto_js_filter_table.asp
-->

<div class="wrap">
  <p>Top Supercomputers of 2017 <a href="https://www.top500.org/lists/2017/06/">(List Source)</a></p>

  <div class="toolbox">
    <input type="text" id="inpValue" placeholder="Type here to filter the table below by name or country.." />


    <div class="control-panel">

      <label><input id="rbName" type="radio" name="radios" checked/>
  Name</label>

      <label><input id="rbCountry" type="radio" name="radios" />
  Country</label>

      <label><input id="cbCaseSns" type="checkbox" />
  Case sensitive</label>

      <button id="btnClear">Clear</button>

      <div class="info-panel">
        <p>Tip: use ESC key to quickly clear text box.</p>
      </div>

    </div>
  </div>

  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sunway TaihuLight</td>
        <td>China</td>
      </tr>
      <tr>
        <td>Tianhe-2 (MilkyWay-2)</td>
        <td>China</td>
      </tr>
      <tr>
        <td>Piz Daint</td>
        <td>Switzerland</td>
      </tr>
      <tr>
        <td>Titan</td>
        <td>US</td>
      </tr>
      <tr>
        <td>Sequoia</td>
        <td>US</td>
      </tr>
      <tr>
        <td>Cori</td>
        <td>US</td>
      </tr>
      <tr>
        <td>Oakforest-PACS</td>
        <td>Japan</td>
      </tr>
      <tr>
        <td>K computer</td>
        <td>Japan</td>
      </tr>
      <tr>
        <td>Mira</td>
        <td>US</td>
      </tr>
      <tr>
        <td>Trinity</td>
        <td>US</td>
      </tr>
    </tbody>
  </table>


</div>

body {
  font-size: 16px;
  max-width: 600px;
  position: relative;
  margin: 0 auto;
  font-family: 'Segoe UI', sans-serif;
}

.wrap {
  padding: 10px;
}

.toolbox {
  text-align: center;
  padding: 5px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 20px;
}

.info-panel p {
  font-size: 12px;
}

a {
  text-decoration: none;
  font-size: 12px;
}

#inpValue {
  width: 90%;

  margin: 10px 2px 2px 10px;
  padding: 5px;
  border: 1px solid #eee;
}

.control-panel {
  padding: 5px;
}

label {
  display: inline-block;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f9f9f9;
  padding: 5px;
}

tr {
  border-bottom: 1px solid #ddd;
}

tr th:first-child {
  width: 70%;
}

td {
  padding: 5px;
}

// Get the interactive-input  elements
var btnClear = document.getElementById("btnClear");
var inpValue = document.getElementById("inpValue");
var rbName = document.getElementById("rbName");
var rbCountry = document.getElementById("rbCountry");
var cbCaseSns = document.getElementById("cbCaseSns");

// Table rows
var tblRows = document.getElementsByTagName("tr");

// Button-onclick: Clear
btnClear.addEventListener("click", function() {
  inpValue.value = "";
  filterTable();
});

// Checkbox-onclick: Case sensitive
cbCaseSns.addEventListener("click", function() {
  filterTable();
});

// radio-name-onclick
rbName.addEventListener("click", function() {
  filterTable();
});

// radio-country-onclick
rbCountry.addEventListener("click", function() {
  filterTable();
});

// Inputbox-onkeyup
inpValue.addEventListener("keyup", function(e) {
  if (e.key === "Escape") {
    inpValue.value = "";
  }

  filterTable();
});

function filterTable() {
  // Handle case sensitive
  var caseSn = cbCaseSns.checked ? "" : "i";
  var pattern = new RegExp(inpValue.value, caseSn);

  // Handle column (td number)
  var tdNum = rbName.checked ? 0 : 1;

  // Iterate over rows and filter
  for (var i = 0, l = tblRows.length; i < l; i++) {
    var td = tblRows[i].getElementsByTagName("td")[tdNum];
    if (td) {
      if (td.innerHTML.search(pattern) > -1) {
        tblRows[i].style.display = "";
      } else {
        tblRows[i].style.display = "none";
      }
    }
  }
}