<thead class="thead-dark" >
<tr>
<th scope="col"> Domain Name <input id="0" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
<th scope="col"> Device Name <input id="1" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
<th scope="col"> Main IP Address/VIP <input id="2" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
<th scope="col"> Cluster Member Name <input id="3" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
<th scope="col"> Cluster Member IP Address <input id="4" type="text" onkeyup="myFunction(this.id)" placeholder="Search for"> </th>
</tr>
</thead>
function myFunction(id) {
// Declare variables
let input, filter, table, tr, td, i, txtValue;
input = document.getElementById(id);
console.log(input.value);
filter = input.value.toUpperCase();
table = document.getElementById("table");
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")[id];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}