simple search filter for table html

1function myFunction() {
2  var input, filter, table, tr, td, cell, i, j;
3  input = document.getElementById("myInput");
4  filter = input.value.toUpperCase();
5  table = document.getElementById("myTable");
6  tr = table.getElementsByTagName("tr");
7  for (i = 1; i < tr.length; i++) {
8    // Hide the row initially.
9    tr[i].style.display = "none";
10  
11    td = tr[i].getElementsByTagName("td");
12    for (var j = 0; j < td.length; j++) {
13      cell = tr[i].getElementsByTagName("td")[j];
14      if (cell) {
15        if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
16          tr[i].style.display = "";
17          break;
18        } 
19      }
20    }
21  }
22}

1<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
2
3<table id="myTable">
4  <tr class="header">
5    <th style="width:60%;">Name</th>
6    <th style="width:40%;">Country</th>
7  </tr>
8  <tr>
9    <td>Alfreds Futterkiste</td>
10    <td>Germany</td>
11  </tr>
12  <tr>
13    <td>Berglunds snabbkop</td>
14    <td>Sweden</td>
15  </tr>
16  <tr>
17    <td>Island Trading</td>
18    <td>UK</td>
19  </tr>
20  <tr>
21    <td>Koniglich Essen</td>
22    <td>Germany</td>
23  </tr>
24  <tr>
25    <td>Laughing Bacchus Winecellars</td>
26    <td>Canada</td>
27  </tr>
28  <tr>
29    <td>Magazzini Alimentari Riuniti</td>
30    <td>Italy</td>
31  </tr>
32  <tr>
33    <td>North/South</td>
34    <td>UK</td>
35  </tr>
36  <tr>
37    <td>Paris specialites</td>
38    <td>France</td>
39  </tr>
40</table>
41
42<script>
43function myFunction() {
44  var input, filter, table, tr, td, i;
45  input = document.getElementById("myInput");
46  filter = input.value.toUpperCase();
47  table = document.getElementById("myTable");
48  tr = table.getElementsByTagName("tr");
49  for (i = 0; i < tr.length; i++) {
50    td = tr[i].getElementsByTagName("td")[0];
51    if (td) {
52      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
53        tr[i].style.display = "";
54      } else {
55        tr[i].style.display = "none";
56      }
57    }       
58  }
59}
60</script>

1for (i = 1; i < tr.length; i++) {
2    // Hide the row initially.
3    tr[i].style.display = "none";
4
5    td = tr[i].getElementsByTagName("td");
6    for (var j = 0; j < td.length; j++) {
7      cell = tr[i].getElementsByTagName("td")[j];
8      if (cell) {
9        if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
10          tr[i].style.display = "";
11          break;
12        } 
13      }
14    }
15}
16