首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在javascript中使用搜索过滤器和复选框过滤器创建高级过滤器逻辑?

如何在javascript中使用搜索过滤器和复选框过滤器创建高级过滤器逻辑?
EN

Stack Overflow用户
提问于 2018-10-04 00:59:10
回答 1查看 54关注 0票数 0

我有一个搜索筛选器和一个复选框筛选器,它可以单独工作。例如,如果我选中一个类别,它将进行过滤,但如果我在搜索框中输入文本,则类别过滤器将消失,就像它重新设置所有过滤器一样。正如我所说的,它们单独工作:(

这是我的javascript

    var input, filter, found, table, tr, td, i, j;     

    function myFunction() {
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                if (tr[i].id !== 'tableHeader'){tr[i].style.display = "none";}
            }
        }
    }

    $(function() {
        $('input[type="checkbox"]').change(function() {
          if($('input[type="checkbox"]:checked').length > 0) {
            var vals = $('input[type="checkbox"]:checked').map(function() {
              return this.value;
            }).get();
            $('#myTable tr')
            .hide()    // 1
            .filter(function() {    // 2
            $('#tableHeader').show();
              return vals.indexOf($(this).find('td:eq(4)').text()) > -1;
            }).show();
          } else {
            // Show all
            $('#myTable tr').show();
          }
        });
      });        
EN

回答 1

Stack Overflow用户

发布于 2018-10-04 03:46:35

您必须将过滤相同视图的函数分开。每个函数都忽略另一个函数的设置(即,仅根据其触发控制设置视图)。

您需要创建一个逻辑(例如,函数),它将同时考虑搜索输入和复选框的值。然后从这些控件触发此逻辑。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52632153

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档