Search Field On Multiple Indexes In A Html Table Using Java-script
I have following Html table in my application
Solution 1:
The same way as you loop your trs, you should loop your tds:
functionmyFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("sample_editable_1");
tr = table.querySelectorAll("tbody tr");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
Protips: Keep your indentation clean and textContent fits better in this scenario.
Don't try to search against tr[i].textContent as that will concatenate column contents, so if last_name column has "juan" and phone_no column has "0411", searching for "an04" will return positive. I guess that you don't want this to happen. Is better to search for each column content individually.
Post a Comment for "Search Field On Multiple Indexes In A Html Table Using Java-script"