Question

我有2个下拉列表用于过滤表格。这些工作正常。它们根据选择显示/隐藏行。我也想添加一个搜索以进一步过滤行，但是我无法使其正常工作。

例如搜索需要考虑下拉菜单。因此，如果下拉列表1 =“三”并且下拉列表2 =“四”（例如），则返回5行。如果我开始在搜索框“右侧”中输入内容，则应显示2行。当我退出搜索时，应该会重新出现5行（下拉过滤器完好无损）

CODEPEN：https://codepen.io/rblanc/pen/eYOEgXg

这是JQuery

$(function() {
  $('#archive, #type').change(function() {
    filterTable($('#archive').val(), $('#type').val());
  });
});

function filterTable(archive, entry) {
  var $rows = $('#filter tbody tr').show();

   if (archive == "one") {
    $rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
    $rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
  } else if (archive == "two") {
    $rows.filter(":has(td:nth-child(4):contains('One'))").hide()
    $rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
  } else if (archive == "three") {
    $rows.filter(":has(td:nth-child(4):contains('One'))").hide()
    $rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
  }

  if (entry == "one") {

    $rows.filter(":has(td:nth-child(6):contains('N'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('Y'))").hide()

  } else if (entry == "two") {

    $rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('N'))").hide()

  } else if (entry == "three") {

    $rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('N'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('Y'))").hide()

   } else if (entry == "four") {

    $rows.filter(":has(td:nth-child(6):contains('N'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('N'))").hide()

   }
}

// SEARCH INPUT
$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tbody tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $row.find("td:first").text();

            if (id.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

带有搜索输入的jQuery过滤表

0 个答案: