Í’m trying to make this search/filter function filter by looking at data in col0 or col1.
What I’m trying to change the JS, to look at td = tr[i].getElementsByTagName("td")[0]; and td = tr[i].getElementsByTagName("td")[1];, but can’t make it work.
Code working for searching on Name (not country):
JavaScript
x
18
18
1
function myFunction() {2
var input, filter, table, tr, td, i, txtValue;3
input = document.getElementById("myInput");4
filter = input.value.toUpperCase();5
table = document.getElementById("myTable");6
tr = table.getElementsByTagName("tr");7
for (i = 0; i < tr.length; i++) {8
td = tr[i].getElementsByTagName("td")[0];9
if (td) {10
txtValue = td.textContent || td.innerText;11
if (txtValue.toUpperCase().indexOf(filter) > -1) {12
tr[i].style.display = "";13
} else {14
tr[i].style.display = "none";15
}16
} 17
}18
}JavaScript
1
34
34
1
* {2
box-sizing: border-box;3
}4
5
#myInput {6
background-image: url('/css/searchicon.png');7
background-position: 10px 10px;8
background-repeat: no-repeat;9
width: 100%;10
font-size: 16px;11
padding: 12px 20px 12px 40px;12
border: 1px solid #ddd;13
margin-bottom: 12px;14
}15
16
#myTable {17
border-collapse: collapse;18
width: 100%;19
border: 1px solid #ddd;20
font-size: 18px;21
}22
23
#myTable th, #myTable td {24
text-align: left;25
padding: 12px;26
}27
28
#myTable tr {29
border-bottom: 1px solid #ddd;30
}31
32
#myTable tr.header, #myTable tr:hover {33
background-color: #f1f1f1;34
}JavaScript
1
52
52
1
<!DOCTYPE html>2
<html>3
<head>4
<meta name="viewport" content="width=device-width, initial-scale=1">5
</head>6
<body>7
8
<h2>My Customers</h2>9
10
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">11
12
<table id="myTable">13
<tr class="header">14
<th style="width:60%;">Name</th>15
<th style="width:40%;">Country</th>16
</tr>17
<tr>18
<td>Alfreds Futterkiste</td>19
<td>Germany</td>20
</tr>21
<tr>22
<td>Berglunds snabbkop</td>23
<td>Sweden</td>24
</tr>25
<tr>26
<td>Island Trading</td>27
<td>UK</td>28
</tr>29
<tr>30
<td>Koniglich Essen</td>31
<td>Germany</td>32
</tr>33
<tr>34
<td>Laughing Bacchus Winecellars</td>35
<td>Canada</td>36
</tr>37
<tr>38
<td>Magazzini Alimentari Riuniti</td>39
<td>Italy</td>40
</tr>41
<tr>42
<td>North/South</td>43
<td>UK</td>44
</tr>45
<tr>46
<td>Paris specialites</td>47
<td>France</td>48
</tr>49
</table>50
51
</body>52
</html>Advertisement
Answer
You can grab the textContent of both the columns and then display the rows where the textContent contains the filterText.
I’ve also made the following changes to your code:
- Wrapped table heading in
<thead>and table body in<tbody>. - Used Element.children to loop over all the rows in the table.
- Used Element.firstElementChild & Element.lastElementChild to grab the first and second column for every row.
- Used String.prototype.includes to check if the search text is present in the columns.
- Passed
eventto the function.
JavaScript
1
15
15
1
let tbody = document.getElementById("table-body");2
3
function myFunction(e) {4
const filterText = e.target.value.toUpperCase();5
Array.from(tbody.children).forEach((row) => {6
const name = row.firstElementChild.textContent.toUpperCase();7
const country = row.lastElementChild.textContent.toUpperCase();8
9
if (name.includes(filterText) || country.includes(filterText)) {10
row.style.display = "table-row";11
} else {12
row.style.display = "none";13
}14
})15
}JavaScript
1
36
36
1
* {2
box-sizing: border-box;3
}4
5
#myInput {6
background-image: url('/css/searchicon.png');7
background-position: 10px 10px;8
background-repeat: no-repeat;9
width: 100%;10
font-size: 16px;11
padding: 12px 20px 12px 40px;12
border: 1px solid #ddd;13
margin-bottom: 12px;14
}15
16
#myTable {17
border-collapse: collapse;18
width: 100%;19
border: 1px solid #ddd;20
font-size: 18px;21
}22
23
#myTable th,24
#myTable td {25
text-align: left;26
padding: 12px;27
}28
29
#myTable tr {30
border-bottom: 1px solid #ddd;31
}32
33
#myTable tr.header,34
#myTable tr:hover {35
background-color: #f1f1f1;36
}JavaScript
1
45
45
1
<h2>My Customers</h2>2
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">3
4
<table id="myTable">5
<thead>6
<tr class="header">7
<th style="width:60%;">Name</th>8
<th style="width:40%;">Country</th>9
</tr>10
</thead>11
<tbody id="table-body">12
<tr>13
<td>Alfreds Futterkiste</td>14
<td>Germany</td>15
</tr>16
<tr>17
<td>Berglunds snabbkop</td>18
<td>Sweden</td>19
</tr>20
<tr>21
<td>Island Trading</td>22
<td>UK</td>23
</tr>24
<tr>25
<td>Koniglich Essen</td>26
<td>Germany</td>27
</tr>28
<tr>29
<td>Laughing Bacchus Winecellars</td>30
<td>Canada</td>31
</tr>32
<tr>33
<td>Magazzini Alimentari Riuniti</td>34
<td>Italy</td>35
</tr>36
<tr>37
<td>North/South</td>38
<td>UK</td>39
</tr>40
<tr>41
<td>Paris specialites</td>42
<td>France</td>43
</tr>44
<tbody>45
</table>If there are more than two columns and you want to apply filter based on all columns, then you can use Array.prototype.some and check if any of the columns contain the search text.
JavaScript
1
13
13
1
let tbody = document.getElementById("table-body");2
3
function myFunction(e) {4
const filterText = e.target.value.toUpperCase();5
Array.from(tbody.children).forEach((row) => {6
const showRow = Array.from(row.children).some(c => c.textContent.toUpperCase().includes(filterText))7
if (showRow) {8
row.style.display = "table-row";9
} else {10
row.style.display = "none";11
}12
})13
}JavaScript
1
36
36
1
* {2
box-sizing: border-box;3
}4
5
#myInput {6
background-image: url('/css/searchicon.png');7
background-position: 10px 10px;8
background-repeat: no-repeat;9
width: 100%;10
font-size: 16px;11
padding: 12px 20px 12px 40px;12
border: 1px solid #ddd;13
margin-bottom: 12px;14
}15
16
#myTable {17
border-collapse: collapse;18
width: 100%;19
border: 1px solid #ddd;20
font-size: 18px;21
}22
23
#myTable th,24
#myTable td {25
text-align: left;26
padding: 12px;27
}28
29
#myTable tr {30
border-bottom: 1px solid #ddd;31
}32
33
#myTable tr.header,34
#myTable tr:hover {35
background-color: #f1f1f1;36
}JavaScript
1
45
45
1
<h2>My Customers</h2>2
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">3
4
<table id="myTable">5
<thead>6
<tr class="header">7
<th style="width:60%;">Name</th>8
<th style="width:40%;">Country</th>9
</tr>10
</thead>11
<tbody id="table-body">12
<tr>13
<td>Alfreds Futterkiste</td>14
<td>Germany</td>15
</tr>16
<tr>17
<td>Berglunds snabbkop</td>18
<td>Sweden</td>19
</tr>20
<tr>21
<td>Island Trading</td>22
<td>UK</td>23
</tr>24
<tr>25
<td>Koniglich Essen</td>26
<td>Germany</td>27
</tr>28
<tr>29
<td>Laughing Bacchus Winecellars</td>30
<td>Canada</td>31
</tr>32
<tr>33
<td>Magazzini Alimentari Riuniti</td>34
<td>Italy</td>35
</tr>36
<tr>37
<td>North/South</td>38
<td>UK</td>39
</tr>40
<tr>41
<td>Paris specialites</td>42
<td>France</td>43
</tr>44
<tbody>45
</table>