如何通過帶有引導程序下拉列表的JavaScript過濾表？

Question

我認為我的問題比在互聯網上看到的要復雜一些，因為我需要在一張桌子上進行多次過濾。 所以這是我的代碼：

 function searchTable() { var input, filter, table, tr, td, i; input = document.getElementById("search"); filter = input.value.toUpperCase(); table = document.getElementById("table"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } 

 #table { border-collapse: collapse; width: 100%; border: 1px solid #ddd; margin-top: 20px; } #table th, #table td { text-align: left; padding: 12px; } #table tr { border-bottom: 1px solid #ddd; } #table tr.header, #table tr:hover { background-color: #f1f1f1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="input-group"> <input class="form-control" id="search" onkeyup="searchTable();" placeholder="search distribution" name="s" autocomplete="off" autofocus> <div class="input-group-btn"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Devices</button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="javascript:void(0)" onclick="">Desktop</a> <a class="dropdown-item" href="javascript:void(0)">Mobile</a> <a class="dropdown-item" href="javascript:void(0)">Tablet</a> </div> </div> </div> <table id="table" class="table-striped table-hover"> <tr class="header"> <th style="width:35%;">Distribution</th> <th style="width:35%;">Supported devices</th> <th style="width:20%;">Download</th> </tr> <tr> <td>Glass '17</td> <td>Desktop & Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Glass '17</td> <td>Tablet</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Other distribution</td> <td>Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Distribution 3</td> <td>Tablet & Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> </table> 

seachTable()函數用於按<td> （第一個子項）的內容過濾表。 我想要達到的目的還在於按設備類型過濾表。 困難的是，某些發行版在一種以上的設備類型上受支持。

---

我嘗試了什么？

 function searchTable() { var input, filter, table, tr, td, i; var input = document.getElementById("search"); var filter = input.value.toUpperCase(); var table = document.getElementById("table"); var tr = table.getElementsByTagName("tr"); for (var i = 1; i < tr.length; i++) { var tds = tr[i].getElementsByTagName("td"); var firstCol = tds[0].textContent.toUpperCase(); var secondCol = tds[1].textContent.toUpperCase(); if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } function searchTableDevice(device) { var filter, table, tr, td, i; $("#deviceSelector").html(device); var filter = device.toUpperCase(); var table = document.getElementById("table"); var tr = table.getElementsByTagName("tr"); if (device == "all") { $("#table tr").css("display", ""); $("#deviceSelector").html("Devices"); } else { searchTable(); for (var i = 1; i < tr.length; i++) { var tds = tr[i].getElementsByTagName("td"); var secondCol = tds[1].textContent.toUpperCase(); if (secondCol.indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } 

 #table { border-collapse: collapse; width: 100%; border: 1px solid #ddd; margin-top: 20px; } #table th, #table td { text-align: left; padding: 12px; } #table tr { border-bottom: 1px solid #ddd; } #table tr.header, #table tr:hover { background-color: #f1f1f1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="input-group"> <input class="form-control" id="search" onkeyup="searchTable();" placeholder="search distribution" name="s" autocomplete="off" autofocus> <div class="input-group-btn"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="deviceSelector"> Devices </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Desktop</a> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Mobile</a> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Tablet</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice('all')">All</a> </div> </div> </div> <table id="table" class="table-striped table-hover"> <tr class="header"> <th style="width:35%;">Distribution</th> <th style="width:35%;">Supported devices</th> <th style="width:20%;">Download</th> </tr> <tr> <td>Glass '17</td> <td>Desktop & Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Glass '17</td> <td>Tablet</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Other distribution</td> <td>Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Distribution 3</td> <td>Tablet & Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> </table> 

我嘗試制作一個新功能searchTableDevice() ，其內容與searchTable()相似，但不是從輸入中獲取文本，而是從下拉菜單中的<a>元素獲取文本。 發生了什么？ searchTable()設置style.display = "block"到與輸入文本匹配的行，並且還顯示了被seacrhTableDevice()隱藏的行。 我完全不知所措。

---

任何幫助將受到高度贊賞和歡迎。 提前致謝！

Answer 1

工作代碼。

 $(function () { $('#search').on('input', function () { searchRow(); }); }) function searchRow() { var $rows = $('#table > tbody > tr').not(".header"); var val1 = $.trim($('#search').val()).replace(/ +/g, ' ').toLowerCase(); var val2 = $.trim($("#deviceSelector").text()).toLowerCase(); val2 = (val2 === "devices") ? "" : val2; $rows.show().filter(function () { var text1 = $(this).find('td:nth-child(1)').text().replace(/\\s+/g, ' ').toLowerCase(); var text2 = $(this).find('td:nth-child(2)').text().replace(/\\s+/g, ' ').toLowerCase(); return !~text1.indexOf(val1) || !~text2.indexOf(val2); }).hide(); } function searchTableDevice(device) { var filter, table, tr, td, i; $("#deviceSelector").html(device); if (device == "all") { $("#deviceSelector").html("Devices"); } searchRow(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <style type="text/css"> #table { border-collapse: collapse; width: 100%; border: 1px solid #ddd; margin-top: 20px; } #table th, #table td { text-align: left; padding: 12px; } #table tr { border-bottom: 1px solid #ddd; } #table tr.header, #table tr:hover { background-color: #f1f1f1; } </style> <div class="input-group"> <input class="form-control" id="search" placeholder="search distribution" name="s" autocomplete="off" autofocus> <div class="input-group-btn"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="deviceSelector"> Devices </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Desktop</a> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Mobile</a> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Tablet</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice('all')">All</a> </div> </div> </div> <table id="table" class="table-striped table-hover"> <tr class="header"> <th style="width:35%;">Distribution</th> <th style="width:35%;">Supported devices</th> <th style="width:20%;">Download</th> </tr> <tr> <td>Glass '17</td> <td>Desktop & Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Glass '17</td> <td>Tablet</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Other distribution</td> <td>Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> <tr> <td>Distribution 3</td> <td>Tablet & Mobile</td> <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td> </tr> </table>