jQuery/Javascript-连接两个过滤器-只显示tr's与td's正在匹配一个数组

jQuery/Javascript - Connecting two filters - showing only tr's with td's matching an array

本文关键字：一个 数组 td tr 连接 Javascript- 两个 显示 -只 过滤器 jQuery      更新时间：2023-09-26

我的代码目前有两个独立的过滤器，它们根据自己的标准过滤表。

我已经为代码的这一特定部分创建了一个简化的jsfiddle。

我想做的是将这两个过滤器连接在一起。因此，例如，如果选择了Students，则按钮submit只过滤出与数组编号相对应的Students（学生），但不接触任何其他类型的驱动程序。

同样，如果表已经被过滤，那么选择驱动程序类型只适用于已经被过滤掉的行。

这是代码：

$('body').on('click', 'button', function() {
    var array = [123, 124, 125, 126];
  var filter = function() {
    var match = false;
    $(this).find('td').each(function() {
      var currentText = $(this).text();
      var filtered = array.filter(function(value) {
        return value == currentText;
      });
      if (filtered.length > 0) {
        match = true;
      }
    });
    return match;
  };
  $('tr').hide().filter(filter).show();
});
                $('#driverTypes').change(function () {
                    var val = parseInt($(this).val(), 10);
                    switch (val) {
                        case 777:
                        $('tr').show();
                        break;
                        case 19:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Lease Purchase";
                            }).show();
                        break;
                        case 20:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Company Driver Team";
                            }).show();
                        break;
                        case 21:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Student";
                            }).show();
                        break;
                        case 22:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Company Driver";
                            }).show();
                        break;
                    }
                    });

http://jsfiddle.net/m4orLpd3/12/

感谢

以下是可以执行您想要的操作的代码。它将当前过滤器保留在全局对象中。每列存储一个单独的过滤器，当执行过滤器时，两者结合在一起：

// List of zip codes of interest
var zipFinal2 = [123, 124, 125, 126];
// Variable to retain currently applied filter:
// An array with a filter per column. 
var columnFilters = [{}, {}, {}, {}]; // add as many as you have columns
var zipColumnNo = 0;
var driverColumnNo = 1;
function applyFilter(filter) {
    $('tr').each(function() {
        $(this).toggle( // show when no TD has mismatching content
            !$(this).find('td').filter(function(idx) {
                // return true when content does not match the filter on this column
                return filter[idx] && Object.keys(filter[idx]).length &&
                                !filter[idx].hasOwnProperty($(this).text());
            }).length
        );
    });
}
$('#zipButton').click(function() {
    // toggle first-column filter:
    var newFilter = {};
    if (!Object.keys(columnFilters[zipColumnNo]).length) {
        // turn zipFinal2[] into object with values as properties for faster lookup
        zipFinal2.forEach(function(zip) {
            newFilter[zip] = 1;
        });
    }
    columnFilters[zipColumnNo] = newFilter;
    applyFilter(columnFilters);
});
$('#driverTypes').change(function () {
    columnFilters[driverColumnNo] =  {}; // no filter
    if (this.selectedIndex) {
         // filter second column on text in selected option
         columnFilters[driverColumnNo][$(this.options[this.selectedIndex]).text()] = 1;
    }
    applyFilter(columnFilters);
});
// reset filter on page load:
$(function() {
    $('#driverTypes').val(777);
});

看看小提琴。

作为奖励，此代码还将"提交"按钮（奇怪的名称）视为切换：当您再次单击时，该列上的过滤器将被删除。

某些浏览器在刷新页面时会在下拉列表框中保留上次选择的值。所以我在最后添加了重置它所需的代码。否则情况不一致：表中的所有条目都可见，但在下拉列表中选择了一个筛选器。

每当使用两个控件中的一个时，代码都会调用applyFilter方法，然后对所有tr元素调用toggle方法。参数决定可见性。只有当td元素中没有一个与过滤器不匹配时，才会设置可见性。如果并且仅当为该列定义了筛选器（与空对象不同），并且td中的值不是该筛选器对象的属性时，td不匹配。

如果您希望只在兼容ECMAScript-6的浏览器中运行，那么可以使用Set而不是对象属性来存储筛选值，从而使代码变得更好。

此外，如果希望使用更多的表进行筛选，可以将table标记传递给applyFilter函数，并将columnFilters数组存储在table标记的数据属性中，从而使其更通用。

修改了您的筛选方法。使用$（'tr:visible'）而不是$（'r'）。jQueryhide（）等效于css（"display"，"none"），后者被认为是可见的，因为它们仍然占用布局中的空间。

var filter = function() {
    var text = $(this).text();
    var result = array.filter(function(id){
        return ((text.indexOf(id) >= 0) ? true : false);
    });
    return !result.length;
};
$('tr:visible').filter(filter).hide();

http://jsfiddle.net/m4orLpd3/13/

相关文章：