Search Table

HTML

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by min-max values" title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Min</th>
    <th style="width:40%;">Max</th>
    <th style="width:40%;">Output</th>
  </tr>
  <tr>
    <td>10</td>
    <td>20</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>30</td>
    <td>40</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>60</td>
    <td>70</td>
    <td>UK</td>
  </tr>
</table>

JavaScript

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput").value;
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    td2 = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      txtValue2 = td2.textContent || td2.innerText;
      if(input.trim().length == 0)
      	tr[i].style.display = "";
      else
      {
      	if (parseInt(input) >= parseInt(txtValue) && parseInt(input) <= parseInt(txtValue2)) {
        	tr[i].style.display = "";
      	} else {
        	tr[i].style.display = "none";
      	}
      }
    }       
  }
}