在jQuery上按类或数据过滤表

Question

1. 当我选择第一个“图标”时显示“未找到”时出现错误，然后选择“护符”并且不显示。 应显示“未找到”。
2. 有可能这样做吗？

添加到类= f图标f环f领。 然后按类查找值。

选择“图标环颈或环图标颈部或颈环图标”并显示此行。 使其仅在找到匹配项时显示。

 $(document).ready(function() { (function() { var filters = { itemslot1: null, itemslot2: null, itemslot3: null }; function updateFilters() { $(".table-data") .hide() .filter(function() { var self = $(this), result = true; Object.keys(filters).forEach(function(filter) { if ( filters[filter] && filters[filter] != "All" ) { result = result && filters[filter] === self.data(filter); } }); return result; }) .show(); } function bindDropdownFilters() { Object.keys(filters).forEach(function(filterName) { $("#" + filterName + "-filter").on("change", function() { filters[filterName] = this.value; updateFilters(); var $table = $('#filter-table'), $colLength = $table.find('thead th').length, $filteredCount = $table.find('tbody tr:visible').length; console.log($filteredCount); if ($filteredCount == 0) { $table.find('tbody').append($("<tr />").addClass("no-result").css({ "text-align": "center" }).append($("<td />").attr("colspan", $colLength).html("Not found."))); } else { $(".no-result").remove(); } }); }); } bindDropdownFilters(); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='table-filters'> <select id="itemslot1-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot2-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot3-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> </div> <table id="filter-table"> <thead> <tr> <th>Slot 1</th> <th>Slot 2</th> <th>Slot 3</th> </tr> </thead> <tbody> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist"> <td>Ring</td> <td>Neck</td> <td>Waist</td> </tr> <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring"> <td>Neck</td> <td>Waist</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring"> <td>Sword Knot</td> <td>Neck</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring"> <td>Ring</td> <td>Ring</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman"> <td>Ring</td> <td>Ring</td> <td>Talisman</td> </tr> </tbody> </table> 

Answer 1

我通过首先过滤具有有效值的键来简化过滤。 如果没有，则显示所有行。

然后使用Array#every()来匹配所有具有有效过滤器的列。

当你有一个问题，就是你的result只取决于在最后的关键Object.keys()

在bindDropdownFilters()或html中bindDropdownFilters()进行任何更改

 $(document).ready(function() { (function() { var filters = { itemslot1: null, itemslot2: null, itemslot3: null }; function updateFilters() { // filter for keys that are valid var filterKeys = Object.keys(filters).filter(function(filter) { return filters[filter] && filters[filter] != "All" }) if (!filterKeys.length) { // no filters...show all $(".table-data").show() } else { $(".table-data") .hide() .filter(function() { var self = $(this); // make sure all valid filters have a match return filterKeys.every(function(filter) { return filters[filter] === self.data(filter); }); }).show(); } } function bindDropdownFilters() { Object.keys(filters).forEach(function(filterName) { $("#" + filterName + "-filter").on("change", function() { filters[filterName] = this.value; updateFilters(); var $table = $('#filter-table'), $colLength = $table.find('thead th').length, $filteredCount = $table.find('tbody tr:visible').length; console.log($filteredCount); if ($filteredCount == 0) { $table.find('tbody').append($("<tr />").addClass("no-result").css({ "text-align": "center" }).append($("<td />").attr("colspan", $colLength).html("Not found."))); } else { $(".no-result").remove(); } }); }); } bindDropdownFilters(); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='table-filters'> <select id="itemslot1-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot2-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot3-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> </div> <table id="filter-table"> <thead> <tr> <th>Slot 1</th> <th>Slot 2</th> <th>Slot 3</th> </tr> </thead> <tbody> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist"> <td>Ring</td> <td>Neck</td> <td>Waist</td> </tr> <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring"> <td>Neck</td> <td>Waist</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring"> <td>Sword Knot</td> <td>Neck</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring"> <td>Ring</td> <td>Ring</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman"> <td>Ring</td> <td>Ring</td> <td>Talisman</td> </tr> </tbody> </table> 

Answer 2

为isZero提供了布尔检查，以跟踪是否应显示或隐藏未找到。

还添加了一个检查以确认您的table-data可见，然后将删除“未找到”。

当您选择“图标”时，将比“护身符”保留“未找到”选项。

 $(document).ready(function() { (function() { var filters = { itemslot1: null, itemslot2: null, itemslot3: null }; function updateFilters() { $(".table-data") .hide() .filter(function() { var self = $(this), result = true; Object.keys(filters).forEach(function(filter) { if ( filters[filter] && filters[filter] != "All" ) { result = result && filters[filter] === self.data(filter); } }); return result; }) .show(); } function bindDropdownFilters() { var isZero = false; Object.keys(filters).forEach(function(filterName) { $("#" + filterName + "-filter").on("change", function() { filters[filterName] = this.value; updateFilters(); var $table = $('#filter-table'), $colLength = $table.find('thead th').length, $filteredCount = $table.find('tbody tr:visible').length; console.log($filteredCount); if ($filteredCount == 0 && !isZero) { isZero = true; $table.find('tbody').append($("<tr />").addClass("no-result").css({ "text-align": "center" }).append($("<td />").attr("colspan", $colLength).html("Not found."))); } else if ($('.table-data').css('display') != 'none') { $(".no-result").remove(); isZero = false; } }); }); } bindDropdownFilters(); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='table-filters'> <select id="itemslot1-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot2-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot3-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> </div> <table id="filter-table"> <thead> <tr> <th>Slot 1</th> <th>Slot 2</th> <th>Slot 3</th> </tr> </thead> <tbody> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist"> <td>Ring</td> <td>Neck</td> <td>Waist</td> </tr> <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring"> <td>Neck</td> <td>Waist</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring"> <td>Sword Knot</td> <td>Neck</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring"> <td>Ring</td> <td>Ring</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman"> <td>Ring</td> <td>Ring</td> <td>Talisman</td> </tr> </tbody> </table>