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>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>