JavaScript: Поиск по таблице

<input type="text" id="myInput" class="form-control mb-4" onkeyup="myFunction()" placeholder="Поиск по столицам..." title="Введите имя">

<table id="myTable" class="table">
 <tr class="text-white-50">
 <th>Столица</th>
 <th>Страна</th>
 </tr>
 <tr>
 <td>Москва</td>
 <td>Россия</td>
 </tr>
 <tr>
 <td>Стокгольм</td>
 <td>Швеция</td>
 </tr>
 <tr>
 <td>Лондон</td>
 <td>Великобритания</td>
 </tr>
 <tr>
 <td>Берлин</td>
 <td>Германия</td>
 </tr>
 <tr>
 <td>Оттава</td>
 <td>Канада</td>
 </tr>
 <tr>
 <td>Рим</td>
 <td>Италия</td>
 </tr>
 <tr>
 <td>Париж</td>
 <td>Франция</td>
 </tr>
</table>

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

Рабочий пример