I want to search from both Name and Country values

I want to search on the Name and Country values ​​columns with the text filter, but now I can only search on one column. How can I change the value of tr[i].getElementsByTagName('td')[0] to filter on both columns?

I'll be happy if you can help me.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<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>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<script>
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";
}
}
}
}
</script>

<!-- end snippet -->

You can select both fields and ask it to match against either.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<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>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<script>
// Declare variables
var input, filter, table, tr, tdName, tdCountry, i, txtValueName, txtValueCountry;
input = document.getElementById("myInput");
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

// Hide all table rows initially
for (i = 0; i < tr.length; i++) {
if (tr[i].classList.contains('header')) {
continue;
}
tr[i].style.display = "none";
}
function myFunction() {
filter = input.value.toUpperCase();
// Loop through all table rows, and hide those that don't match the search query in either the Name or Country column
for (i = 0; i < tr.length; i++) {
tdName = tr[i].getElementsByTagName("td")[0];
tdCountry = tr[i].getElementsByTagName("td")[1];
if (tdName && tdCountry) {
txtValueName = tdName.textContent || tdName.innerText;
txtValueCountry = tdCountry.textContent || tdCountry.innerText;
if (txtValueName.toUpperCase().indexOf(filter) > -1 || txtValueCountry.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

</script>

<!-- end snippet -->

Try this,

<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue,txtValue1;
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];
td1 = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue =  td.textContent || td.innerText ;
txtValue1 =  td1.textContent || td1.innerText ;
console.log(txtValue1);
if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

I went with a simpler approach.

Assuming, you want to search the content of the tr itself. I'm looking in the text content for the filter using the includes function. I use the return of that to toggle a class on the tr.

The CSS class sets the display to block, while I also use CSS to set TR to display none by default.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const input = document.getElementById("myInput");
const table = document.getElementById("myTable");
const trs = table.querySelectorAll("tr:not(.header)");
function myFunction() {  
const filter = input.value.toUpperCase();
trs.forEach((tr) => {
tr.classList.toggle("active",(filter != "" && tr.textContent.toUpperCase().includes(filter)))
});
}

<!-- language: lang-css -->

tr:not(.header){display:none}
tr.active{display:block}

<!-- language: lang-html -->

<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>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>

<!-- end snippet -->