JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-12">
<label>Arama</label>
<input type="text" id="searchInput" onkeyup="myFunction()" /></div>

<div class="col-md-12"><hr/></div>

<div class="col-md-12">



<table class="table table-striped" id="tablo">
<thead>
  <tr>
    <td>Takım</td>
    <td>Ülke</td>
  </tr>
</thead>

<tbody>


<tr><td>Fenerbahçe</td><td>Türkiye</td></tr>
<tr><td>Feyenord</td><td>Hollanda</td></tr>
<tr><td>Osmanlıspor</td><td>Türkiye</td></tr>
<tr><td>Beşiktaş</td><td>Türkiye</td></tr>
<tr><td>Manchester United</td><td>İngiltere</td></tr>
<tr><td>Inter</td><td>İtalya</td></tr>
<tr><td>Juventus</td><td>İtalya</td></tr>

</tbody>
</table>

</div>
<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("tablo");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>