I need help modifying some JavaScript code that currently searches for user input in the first column of a table and hides rows that do not contain that text. I want to update it so that it searches both columns 1 and 2:
HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:20%;">Country</th>
<th style="width:20%;">Size</th>
</tr>
<tr>
<td>Joe Smith</td>
<td>Canada</td>
<td>Medium</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Germany</td>
<td>Small</td>
</tr>
</table>
In the example above, you can enter either "Jane" or "Germany" to filter and display the corresponding row.
JAVASCRIPT:
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
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";
}
}
}
}
</script>