如何使用javascript过滤html表格而无需重新加载页面？

<input id="filterInput" type="text" placeholder="输入过滤条件">
<table id="myTable">
  <tr class="filterable-row">
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr class="filterable-row">
    <td>Jane</td>
    <td>Smith</td>
  </tr>
  <tr class="filterable-row">
    <td>Bob</td>
    <td>Johnson</td>
  </tr>
</table>

document.getElementById("filterInput").addEventListener("input", function() {
  var filterValue = this.value.toLowerCase();
  var rows = document.getElementsByClassName("filterable-row");

  for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
    var foundMatch = false;

    for (var j = 0; j < cells.length; j++) {
      var cellValue = cells[j].textContent || cells[j].innerText;

      if (cellValue.toLowerCase().indexOf(filterValue) > -1) {
        foundMatch = true;
        break;
      }
    }

    if (foundMatch) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
});