I have added a search box to my Bootstrap table. So the first thing that was added was this input which works fine but the I need to search the Country names instead of Names.

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

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


<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1. td = tr[i].getElementsByTagName("td")[1];
2. I suggest you only search the tbody
3. Also use eventlistener

document.getElementById("myInput").addEventListener("keyup",function() {
  // Declare variables
  const filter = this.value.toUpperCase();
  const trs = document.querySelectorAll("#myTable tbody tr");
  // Loop through all table rows, and hide those who don't match the search query
  trs.forEach(tr => {
    const td = tr.cells[1];
    txtValue = td.textContent.toUpperCase()
    tr.hidden = txtValue && !txtValue.includes(filter)
  })
});

<input type="text" id="myInput" placeholder="Search for names.." autocomplete="off">
<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Microsoft</td>
      <td>USA</td>
    </tr>
  </tbody>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>