Hacer Tabla con Filtros 2

https://www.w3schools.com/howto/howto_js_filter_table.asp

<input type="text" id="myInput" onkeyup="gensearch()" placeholder="Search...">

<table id="myTable">
    <thead>
        <tr class="header">
            <td>Artículo</td>
            <td>Lenguaje</td>
        </tr>
    </thead>
        
<tbody>
            <tr>
                <td><a href="/html/lista-fa/">Lista con FontAwesome</a></td>
                <td>html</td>
            </tr>

            <tr>
                <td><a href="/js/highlightjs/">Highlight.js</a></td>
                <td>js</td>
            </tr>
</table>

function gensearch() {
  var input, filter, table, tr, td, i, j, txtValue, found;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    found = false; // Initialize found as false for each row

    // Iterate through all columns of the row
    for (j = 0; j < td.length; j++) {
      if (td[j]) {
        txtValue = td[j].textContent || td[j].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          found = true; // Set found to true if the term is found in the column
          break; // Stop checking more columns if found
        }
      }
    }

    // Display or hide the row based on whether the search term was found
    if (found) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}

    #myInput {
        width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border-radius: 15px;
    margin-bottom: 12px;
    border: none;
    box-sizing: border-box;
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: var(--tableborder); /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}
#myTable a {
    text-decoration: none;
}

#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 10px; /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: var(--tableborder);
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: var(--tablehover);
}