在 HTML 表中使用 `Javascript` 的带有下拉列表的多个过滤器

Question

I Have an HTML table with with rows & columns.The columns need to filtered using drop down values.

At present the code is working upto 2 columns.

Working Scenario 1 :- If I Filter by Name Column : JOHN.

Working Scenario 2 :- If I Filter by Name Column : JOHN && Country Column INDIA .

please help me filter with more than 2 columns.

For upto 3 Filters Ex:- if Name == JOHN && Country == INDIA && Age == 80

For upto 4 Filters Ex:- if Name == JOHN && Country == INDIA && Age == 80 && Salary == 3000

 function SearchData() { var name = document.getElementById("idName").value.toUpperCase(); var country = document.getElementById("idCountry").value.toUpperCase(); var age = document.getElementById("idAge").value.toUpperCase(); var salary = document.getElementById("idSalary").value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 1; i < tr.length; i++) { var rowName = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase(); var rowCountry = tr[i].getElementsByTagName("td")[1].textContent.toUpperCase(); var rowAge = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase(); var rowSalary = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase(); if (name != 'ALL' && country != 'ALL') { if (rowName == name && rowCountry == country) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } else if (rowName != '' || rowCountry != '') { if (name != 'ALL') { if (rowName == name) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } if (country != 'ALL') { if (rowCountry == country) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } }

 <table id="myTable" border="1"> <tr> <th>Name</th> <th>country</th> <th>Age</th> <th>Salary</th> </tr> <tr> <td>Jill</td> <td>USA</td> <td>50</td> <td>1000</td> </tr> <tr> <td>Eve</td> <td>UK</td> <td>50</td> <td>2000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>80</td> <td>3000</td> </tr> <tr> <td>sam</td> <td>AUSTRALIA</td> <td>80</td> <td>4000</td> </tr> <tr> <td>joe</td> <td>INDIA</td> <td>60</td> <td>5000</td> </tr> <tr> <td>John</td> <td>Australia</td> <td>90</td> <td>3000</td> </tr> <tr> <td>alan</td> <td>USA</td> <td>60</td> <td>6000</td> </tr> <tr> <td>Jill</td> <td>USA</td> <td>50</td> <td>5000</td> </tr> <tr> <td>Eve</td> <td>UK</td> <td>50</td> <td>4000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>80</td> <td>3000</td> </tr> <tr> <td>sam</td> <td>AUSTRALIA</td> <td>80</td> <td>4000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>90</td> <td>3000</td> </tr> </table> <select id="idName"> <option value="all">Select Name</option> <option value="Jill">Jill</option> <option value="Eve">Eve</option> <option value="John">John</option> <option value="sam">sam</option> <option value="joe">joe</option> <option value="alan">alan</option> </select> <select id="idCountry"> <option value="all">Select Country</option> <option value="USA">USA</option> <option value="UK">UK</option> <option value="INDIA">INDIA</option> <option value="AUSTRALIA">AUSTRALIA</option> </select> <select id="idAge"> <option value="all">Select Age</option> <option value="50">50</option> <option value="60">60</option> <option value="80">80</option> <option value="90">90</option> </select> <select id="idSalary"> <option value="all">Select Salary</option> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> <option value="4000">4000</option> <option value="5000">5000</option> <option value="6000">6000</option> </select> <input type="button" onclick="SearchData();" value="Submit" />

Answer 1

In a loop let's assume that we would like to display a row, than check if any filter applied, than one per row decide weather it will be shown or not.

 const table = document.getElementById("myTable"); // save all tr const tr = table.getElementsByTagName("tr"); function SearchData() { var name = document.getElementById("idName").value.toUpperCase(); var country = document.getElementById("idCountry").value.toUpperCase(); var age = document.getElementById("idAge").value.toUpperCase(); var salary = document.getElementById("idSalary").value.toUpperCase(); for (i = 1; i < tr.length; i++) { var rowName = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase(); var rowCountry = tr[i].getElementsByTagName("td")[1].textContent.toUpperCase(); var rowAge = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase(); var rowSalary = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase(); var isDiplay = true; if (name != 'ALL' && rowName != name) { isDiplay = false; } if (country != 'ALL' && rowCountry != country) { isDiplay = false; } if (age != 'ALL' && rowAge != age) { isDiplay = false; } if (salary != 'ALL' && rowSalary != salary) { isDiplay = false; } if (isDiplay) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } }

 <table id="myTable" border="1"> <tr> <th>Name</th> <th>country</th> <th>Age</th> <th>Salary</th> </tr> <tr> <td>Jill</td> <td>USA</td> <td>50</td> <td>1000</td> </tr> <tr> <td>Eve</td> <td>UK</td> <td>50</td> <td>2000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>80</td> <td>3000</td> </tr> <tr> <td>sam</td> <td>AUSTRALIA</td> <td>80</td> <td>4000</td> </tr> <tr> <td>joe</td> <td>INDIA</td> <td>60</td> <td>5000</td> </tr> <tr> <td>John</td> <td>Australia</td> <td>90</td> <td>3000</td> </tr> <tr> <td>alan</td> <td>USA</td> <td>60</td> <td>6000</td> </tr> <tr> <td>Jill</td> <td>USA</td> <td>50</td> <td>5000</td> </tr> <tr> <td>Eve</td> <td>UK</td> <td>50</td> <td>4000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>80</td> <td>3000</td> </tr> <tr> <td>sam</td> <td>AUSTRALIA</td> <td>80</td> <td>4000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>90</td> <td>3000</td> </tr> </table> <select id="idName"> <option value="all">Select Name</option> <option value="Jill">Jill</option> <option value="Eve">Eve</option> <option value="John">John</option> <option value="sam">sam</option> <option value="joe">joe</option> <option value="alan">alan</option> </select> <select id="idCountry"> <option value="all">Select Country</option> <option value="USA">USA</option> <option value="UK">UK</option> <option value="INDIA">INDIA</option> <option value="AUSTRALIA">AUSTRALIA</option> </select> <select id="idAge"> <option value="all">Select Age</option> <option value="50">50</option> <option value="60">60</option> <option value="80">80</option> <option value="90">90</option> </select> <select id="idSalary"> <option value="all">Select Salary</option> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> <option value="4000">4000</option> <option value="5000">5000</option> <option value="6000">6000</option> </select> <input type="button" onclick="SearchData();" value="Submit" />

Answer 2

you can use below custom filter function. you can iterate over a row and find matching values.

 function myFunction(index,inputname) { var input, filter, table, tr, td, i, txtValue; input = document.getElementById(inputname); filter = input.value.toUpperCase(); table = document.getElementById("empTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[index]; if (td) { txtValue = td.textContent || td.innerText; if(tr[i].style.display=="") { if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } }

 * { box-sizing: border-box; } #empTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #empTable th, #empTable td { text-align: left; padding: 12px; } #empTable tr { border-bottom: 1px solid #ddd; } #empTable tr.header, #empTable tr:hover { background-color: #f1f1f1; }

 <table id="empTable"> <tr class="header"> <th style="width:60%;"><input type="text" id="name" onkeyup="myFunction(0,'name')" placeholder="Search for names.." title="Type in a name"></th> <th style="width:40%;"><input type="text" id="country" onkeyup="myFunction(1,'country')" placeholder="Search for names.." title="Type in a name"></th> <th style="width:40%;"><input type="text" id="age" onkeyup="myFunction(2,'age')" placeholder="Search for names.." title="Type in a name"></th> <th style="width:40%;"><input type="text" id="salary" onkeyup="myFunction(3,'salary')" placeholder="Search for names.." title="Type in a name"></th> </tr> <tr> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> <th>Age</th> <th>Salary</th> </tr> <tr> <td>Jill</td> <td>USA</td> <td>50</td> <td>1000</td> </tr> <tr> <td>Eve</td> <td>UK</td> <td>50</td> <td>2000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>80</td> <td>3000</td> </tr> <tr> <td>sam</td> <td>AUSTRALIA</td> <td>80</td> <td>4000</td> </tr> <tr> <td>joe</td> <td>INDIA</td> <td>60</td> <td>5000</td> </tr> <tr> <td>John</td> <td>Australia</td> <td>90</td> <td>3000</td> </tr> <tr> <td>alan</td> <td>USA</td> <td>60</td> <td>6000</td> </tr> <tr> <td>Jill</td> <td>USA</td> <td>50</td> <td>5000</td> </tr> <tr> <td>Eve</td> <td>UK</td> <td>50</td> <td>4000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>80</td> <td>3000</td> </tr> <tr> <td>sam</td> <td>AUSTRALIA</td> <td>80</td> <td>4000</td> </tr> <tr> <td>John</td> <td>INDIA</td> <td>90</td> <td>3000</td> </tr> </table>