He agregado un cuadro de búsqueda a mi tabla de Bootstrap. Entonces, lo primero que se agregó fue esta entrada que funciona bien, pero necesito buscar los nombres de los países en lugar de los nombres .
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>td = tr[i].getElementsByTagName("td")[1]; 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>