创建 Function 以搜索整个表而不是仅搜索一列

Question

I have a table with a search function. Initially, my intention was to only search the contents of the first column. I would like to change this and create a search function that searches the entire table.

Below is a snippet of the current code for it:

<script>
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("userinfo");
  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")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

I am using onkeyup in a text field to call the function

Below is the current code for it.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Address" title="Search for Address">

Please help me implement a search function that searches the entire table and hides the rows that done match the input.

regards,

Answer 1

Check if this is want you want,search by country/email/postal code: table-search.surge.sh

If you could give us a piece of your table so i can work my own function around it,anyway,this is what i found and its working(searches the entire table).Try to test this work in another file https://speedysense.com/filter-html-table-using-javascript/

Answer 2

 function searchTable() { var input, filter, found, table, tr, td, i, j; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("userinfo"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { // reading inner html from the td of tr td = tr[i].getElementsByTagName("td"); for (j = 0; j < td.length; j++) { // comparing the inner html if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else{ tr[i].style.display = "none"; } } } }

 <input id='myInput' onkeyup='searchTable()' type='text'> <table id="userinfo"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Be.nett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>

try the above working code