如何使用javascript中的搜索筛选器和复选框筛选器实现预先筛选逻辑?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (150)

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

这是我的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();
          }
        });
      });        
提问于
用户回答回答于

必须分隔过滤相同视图的功能。每个函数都忽略另一个函数的设置(即,仅根据其触发控件设置视图)。需要创建一个将考虑两者的值的逻辑(例如,函数) - 搜索输入和复选框。然后从这些控件触发此逻辑。

扫码关注云+社区

领取腾讯云代金券