jQuery函数相互覆盖

Question

问题：

我有2个jQuery函数，一个是搜索函数，另一个是仅显示某种类型的列值的函数。问题是，如果我使用第二个功能选择一个列值并隐藏其他行，然后尝试搜索重置的行并搜索所有行。

Fiddle

代码：

这是2个功能：

搜索：

$(document).ready(function(){
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr td:nth-child(1)").filter(function() {
      $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

列：

$(function() {
   $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
        $('tbody tr[data-socket!="' + socket + '"]').hide();
      }
   });
   $('select[name="CPUmenu"]').trigger('change');
});

预期结果：

我当时认为该功能只能应用于未隐藏的行，但是我不确定该代码是什么。

更新：

我看到了:hidden选择器，并认为我可以使用.not(:hidden)

我还计划将来增加更多功能，因此需要它能够扩展。

如果您需要更多信息，请告诉我。

谢谢

Answer 1

我真的不知道该怎么做，但我认为您的搜索功能应如下所示：

$(document).ready(function(){
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr td:nth-child(1)").filter(function() {
      if ($(this).parent.css("display") == "block") {
        $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)        
      }
    });
  });
});

Answer 2

这里是working fiddle。

您可以添加，删除按列过滤的类，然后根据类的用法进行搜索。

搜索功能：

     ...
     if($(this).parent().hasClass("filtered")){
           $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1);
     } 

列功能：

    ...
    if (socket.length) {
     $('tbody tr[data-socket!="' + socket + '"]').hide();
     $('tbody tr[data-socket!="' + socket + '"]').removeClass("filtered");
     $('tbody tr[data-socket="' + socket + '"]').addClass("filtered");
    }

Answer 3

快速修复，但抱歉无法很好地扩展：

$(function() {
 $('select[name="CPUmenu"]').change(function(e) {
    let socket = $(this).val();
    $('tbody tr[data-socket]').removeClass('discarded').show(); /// <<<- here the trick
    if (socket.length) {
      $('tbody tr[data-socket!="' + socket + '"]').addClass('discarded').hide(); /// <<<-- here as well
    }
 });
 $('select[name="CPUmenu"]').trigger('change');
});

$("#mySearch").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr:not(.discarded) td:nth-child(1)").filter(function() {
    $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Answer 4

这是工作代码：

  $(function() {
    $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
            $('tbody tr[data-socket!="' + socket + '"]').hide();
          }
        });
        $('select[name="CPUmenu"]').trigger('change');
      });
      $(document).ready(function(){
      $("#mySearch").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $('select[name="CPUmenu"]').trigger('change');
      $("#myTable tr td:nth-child(1)").filter(function() {
      if ($(this).parent().is(":visible")) {
        $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
      }
    });
  });
});