使用多个过滤器过滤表格

Question

我有以下javascript，它接受表单元素的输入，并隐藏不符合搜索词的表行。

<script>
    function wo_search(filter, column) {
        // Declare variables 
        var input, table, tr, td, i;
        input = document.getElementById("wo_search_type");
        table = document.getElementById("work_order");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[column];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

问题是，我的表有7个搜索词，而不只是一个。使用我当前的代码，一次只能使用1个过滤器。选择一个过滤器后，它将隐藏表中的正确元素。一旦用户选择第二个过滤器，第一个过滤器就会无效，基本上所有被该过滤器隐藏的数据会在应用第二个术语之前再次显示。

如何才能将所有过滤器一起应用？

P.S

这是过滤函数根据输入类型调用的方式，有常规文本输入和选择框。

选择框使用onchange="wo_search(this.value.toUpperCase(), 0)"，第二个参数是表列ID。

输入文本使用onkeyup="wo_search(this.value.toUpperCase(), 0)"，第二个参数是表列id。

修改 我不认为我在最初的帖子中很清楚，我为此道歉，但我正在尝试为表格过滤器提供7个不同的输入。

基本上，在表格中，顶部有一行（标题上方），只包含需要过滤表格特定列的输入框（选择或文本输入）。

每列都有自己的过滤器。这是一个截图：

我认为这对jquery来说可能更容易，所以也欢迎jquery的答案。

Answer 1

在我的原始答案的评论中谈到后，这就是我得到的。请检查这是否是您需要的。

修改

我忘记了对正在针对过滤器进行测试的文本小写，这导致了一些时髦的结果。

＆＃13;

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  var filters = [];
  //the array of current filters;
  var table_data = document.querySelectorAll('#filter-me tbody tr');
  //Gets all table rows in the filter me table

  //Adds an event listener to the filters list element
  document.querySelector('#filter-list').addEventListener('click', function(e) {

    if (!e.target.classList.contains('filter-item')) return false;
    var index = parseInt(e.target.getAttribute('data-index'));
    filters.splice(index, 1);
    update_filters();
    run_filters();
  })

  function value_change(column, e) {
    var action = false;
    //No action has been run
    
    if (e.type == 'keypress') {
      //if the action type is keypress, check to see if we have hit enter AND the value is not empty
      if (e.keyCode == 13 && this.value != '') {
        filters.push({
          column: column,
          filter: this.value.toLowerCase()
        });
        //reset the value
        this.value = '';
        //we have done something through this event, therefore we have action
        action = true;
      }
    } else if (e.type = 'change') {
      //If the event is change, simply push the column index + this select's value
      filters.push({
        column: column,
        filter: this.value.toLowerCase()
      });
      //Again, action is true
      action = true;
    }
    if (action) {
      //Since we have action, we need to update the filters list and run the filters against the table.
      update_filters();
      run_filters();
    }
  }

  //This line is sort of a mess:
  //create an empty array, call the slice method on it, binding it to the document.querySelectorAll('.column-filter') NodeList object
  //loop through each with the actual DOM node itself + it's index
  [].slice.call(document.querySelectorAll('.column-filter')).forEach((filter, i) => {
    filter.addEventListener(filter.tagName.toLowerCase() == 'input' ? 'keypress' : 'change', value_change.bind(filter, i));
    //add the event listener to the correct type -- you may want to be more exact depending on your circumstances on this one to determine which event is added
    //Bind the value_change function to the element, but passing the first element as the index from the element of the nodelist.
  });

  function update_filters() {
    document.querySelector('#filter-list').innerHTML = "";
    //remove all elements;
    var els = filters.map((filter, i) => '<span class="filter-item" data-index="' + i + '">' + filter.filter + '</span>');
    //creates a fake span item here
    document.querySelector('#filter-list').innerHTML = els.join('');
    //joins everything with an empty space and sets the innerHTML to the result
  } // end update_filters

  function run_filters() {
    for (var i = 0, row, tds; row = table_data[i]; i++) {
      //get only the TD elements
      tds = row.querySelectorAll('td');
      //in order for a row to run, every filter must match.
      var pass = filters.every(filter => {
        return tds[filter.column].innerText.toLowerCase().indexOf(filter.filter) != -1;
        //for the filter to match, the TD element in the corresponding column must contain the text
      });
      row.style.display = pass ? '' : 'none'; //if pass, no display styles are added; otherwise, hide them.
    }

  } //end run_filters

});

＆＃13;

#filter-list {
  display: inline-block;
}

#filter-list span.filter-item {
  display: inline-block;
  background-color: aqua;
  padding: 3px 6px;
  cursor: pointer;
}

#filter-list span.filter-item+span.filter-item {
  margin-left: 5px;
}

#filter-list span.filter-item::after {
  content: 'x';
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid grey;
}

＆＃13;

<table id="filter-me" class="table">
  <caption id="filter-list"></caption>
  <thead>
    <tr>
      <th>
        <select class="column-filter">
          <option value="">&nbsp;</option>
          <option value="lorem">Lorem</option>
          <option value="illum">Illum</option>
        </select>
      </th>
      <th><input type="search" placeholder="Filter" class="column-filter"></th>
      <th><input type="search" placeholder="Filter" class="column-filter"></th>
      <th><input type="search" placeholder="Filter" class="column-filter"></th>
      <th><input type="search" placeholder="Filter" class="column-filter"></th>
    </tr>
    <tr>
      <th>Lorem, ipsum. <span class="arrow-up">&nbsp;</span></th>
      <th>Dolores, tempora?</th>
      <th>Tempore, soluta?</th>
      <th>Commodi, illum!</th>
      <th>Laudantium, debitis!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet.</td>
      <td>Magni aspernatur eveniet amet. Eos.</td>
      <td>Doloribus numquam at nisi fuga.</td>
      <td>Exercitationem libero saepe iusto labore!</td>
      <td>Quod, debitis. Hic, eius voluptates?</td>
    </tr>
    <tr>
      <td>Excepturi aspernatur quia sequi labore.</td>
      <td>Ad tempore laudantium sed temporibus.</td>
      <td>Officia accusamus architecto perferendis quod?</td>
      <td>Laudantium facilis numquam quas iusto!</td>
      <td>Doloribus tenetur deleniti voluptatum alias.</td>
    </tr>
    <tr>
      <td>Ratione suscipit quis repudiandae ipsam!</td>
      <td>Repellendus blanditiis iure vel delectus.</td>
      <td>Sunt debitis voluptatum consectetur aliquam!</td>
      <td>Libero expedita odio maiores optio!</td>
      <td>Nam molestias delectus quam porro.</td>
    </tr>
    <tr>
      <td>Earum delectus sint ab error?</td>
      <td>Dicta ipsam facilis optio aliquam?</td>
      <td>Blanditiis eligendi sit ad accusamus?</td>
      <td>Sequi laborum illo eos incidunt?</td>
      <td>Necessitatibus iure sequi eaque quam!</td>
    </tr>
    <tr>
      <td>Illum aspernatur fuga laborum ratione!</td>
      <td>Maiores, excepturi! Dolorum, aspernatur mollitia.</td>
      <td>Labore corrupti itaque provident adipisci.</td>
      <td>Ipsum ducimus earum minus fuga.</td>
      <td>Necessitatibus rerum molestias autem libero.</td>
    </tr>
    <tr>
      <td>Nemo omnis similique labore minima!</td>
      <td>Dolore dolores saepe ea adipisci.</td>
      <td>Voluptate iusto in unde quas.</td>
      <td>Quod aperiam sit ut iusto.</td>
      <td>Quidem quisquam cupiditate dolor officiis.</td>
    </tr>
    <tr>
      <td>Officia numquam aliquam qui nulla.</td>
      <td>Laboriosam repellendus soluta aliquid similique.</td>
      <td>Veritatis, neque porro? Quae, quia?</td>
      <td>Magnam vel autem ad blanditiis!</td>
      <td>Laboriosam, a. Sunt, suscipit deserunt!</td>
    </tr>
    <tr>
      <td>Aspernatur iste saepe beatae nam.</td>
      <td>Ducimus quisquam corrupti quam inventore?</td>
      <td>Sit ullam minus possimus quidem!</td>
      <td>Officiis laborum laudantium veritatis et!</td>
      <td>Impedit dignissimos dolores maxime sequi.</td>
    </tr>
    <tr>
      <td>Neque similique cum sequi unde!</td>
      <td>Voluptatibus, ad? Ullam, facilis cumque.</td>
      <td>Enim in magnam id illo!</td>
      <td>Ex nobis quidem voluptatem voluptate.</td>
      <td>Eligendi esse ipsa ipsam omnis!</td>
    </tr>
    <tr>
      <td>Neque, fugit. Tempora, voluptates vel.</td>
      <td>Officia cupiditate dolores magni sunt?</td>
      <td>Eveniet tempore illo ipsa? Non.</td>
      <td>Possimus repellendus eligendi ipsam necessitatibus!</td>
      <td>Quisquam natus eos omnis ea.</td>
    </tr>
    <tr>
      <td>Aliquam voluptas recusandae et animi?</td>
      <td>Quis distinctio officiis quisquam dolores.</td>
      <td>Repellendus suscipit vero delectus hic.</td>
      <td>Quae asperiores temporibus impedit quis.</td>
      <td>Temporibus ipsa quidem magnam odio.</td>
    </tr>
    <tr>
      <td>Voluptatem optio quas nesciunt debitis!</td>
      <td>Hic mollitia alias laborum accusantium?</td>
      <td>Obcaecati eaque corrupti aperiam culpa!</td>
      <td>Voluptatum sequi sed numquam eos!</td>
      <td>Laborum exercitationem deleniti quaerat dolorem.</td>
    </tr>
    <tr>
      <td>Modi nam asperiores totam excepturi.</td>
      <td>Quod ipsa dolorem magni labore.</td>
      <td>Qui quidem quod eum quasi!</td>
      <td>Explicabo, ut eveniet. Quos, nam?</td>
      <td>Harum fugit sequi blanditiis accusamus.</td>
    </tr>
    <tr>
      <td>Ullam dolores vel natus in?</td>
      <td>Dolor velit dolorum quos error!</td>
      <td>Obcaecati blanditiis natus aperiam esse.</td>
      <td>Consequatur quasi qui minima laboriosam.</td>
      <td>Voluptatum, et atque. Iste, earum?</td>
    </tr>
    <tr>
      <td>Voluptate esse placeat doloribus hic?</td>
      <td>Dolorum velit ab incidunt quam.</td>
      <td>Laboriosam facere sed quia nisi.</td>
      <td>Saepe ex officia libero beatae?</td>
      <td>Ipsam ab distinctio assumenda itaque!</td>
    </tr>
    <tr>
      <td>Perferendis facere natus accusantium ut.</td>
      <td>Ipsam possimus dolores corporis totam!</td>
      <td>Ab officia rerum tempora ipsum.</td>
      <td>Id, soluta neque! Voluptatibus, id.</td>
      <td>Eaque enim fugiat corporis velit!</td>
    </tr>
    <tr>
      <td>Voluptatum cum atque eos quod.</td>
      <td>Esse corporis mollitia voluptatem ipsum.</td>
      <td>Corrupti unde inventore similique ad?</td>
      <td>Blanditiis dolorum molestiae minus tempore.</td>
      <td>Temporibus nihil doloremque quibusdam! Voluptatem!</td>
    </tr>
    <tr>
      <td>Iste voluptates iusto facilis cum?</td>
      <td>At est necessitatibus architecto repellendus?</td>
      <td>Officia qui soluta veniam nemo.</td>
      <td>Nobis cupiditate officiis reiciendis possimus.</td>
      <td>Voluptatibus quidem assumenda adipisci quis.</td>
    </tr>
    <tr>
      <td>Illum voluptatibus reprehenderit repellendus nostrum?</td>
      <td>Distinctio natus harum est nulla?</td>
      <td>Temporibus sit consequatur delectus ducimus.</td>
      <td>Veniam possimus qui fugiat temporibus.</td>
      <td>Delectus tenetur asperiores quasi perspiciatis.</td>
    </tr>
    <tr>
      <td>Quod atque ut doloribus libero?</td>
      <td>Animi assumenda praesentium alias accusantium!</td>
      <td>Labore ex optio eveniet architecto.</td>
      <td>Eaque delectus nemo fugiat dolorum.</td>
      <td>Atque, delectus. Obcaecati, saepe veritatis.</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是对您的要求的尝试。因此，以下代码将过滤筛选结果。这意味着，当您在第一个输入中输入内容时，它将根据该结果过滤结果。然后，当您在第二个输入中输入内容时，它将过滤上述结果的结果。因此，一旦隐藏，结果将永远不会被考虑在下一组搜索中。

要重置，请清除所有输入/下拉菜单，您应该能够再次查看所有记录。

$(".column-filter").on('change input', function() {
  var emptyFields = $('.column-filter').filter(function() {
    return $.trim(this.value) === "";
  });
  if (emptyFields.length == $(".column-filter").length) {
    $('table tbody tr').each(function() {
      $(this).show();
    });
  } else {
    var columnNumber = this.id;
    var enteredValue = $(this).val();
    $('table tbody tr:visible').each(function() {
      var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
      if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  }
});

#filter-list {
  display: inline-block;
}

#filter-list span.filter-item {
  display: inline-block;
  background-color: aqua;
  padding: 3px 6px;
  cursor: pointer;
}

#filter-list span.filter-item+span.filter-item {
  margin-left: 5px;
}

#filter-list span.filter-item::after {
  content: 'x';
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="filter-me" class="table">
  <caption id="filter-list"></caption>
  <thead>
    <tr>
      <th>
        <select id='0' class="column-filter">
          <option value="">&nbsp;</option>
          <option value="Lorem">Lorem</option>
          <option value="Illum">Illum</option>
        </select>
      </th>
      <th><input type="search" placeholder="Filter" class="column-filter" id="1"></th>
      <th><input type="search" placeholder="Filter" class="column-filter" id="2"></th>
      <th><input type="search" placeholder="Filter" class="column-filter" id="3"></th>
      <th><input type="search" placeholder="Filter" class="column-filter" id="4"></th>
    </tr>
    <tr>
      <th>Lorem, ipsum. <span class="arrow-up">&nbsp;</span></th>
      <th>Dolores, tempora?</th>
      <th>Tempore, soluta?</th>
      <th>Commodi, illum!</th>
      <th>Laudantium, debitis!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet.</td>
      <td>Magni aspernatur eveniet amet. Eos.</td>
      <td>Doloribus numquam at nisi fuga.</td>
      <td>Exercitationem libero saepe iusto labore!</td>
      <td>Quod, debitis. Hic, eius voluptates?</td>
    </tr>
    <tr>
      <td>Excepturi aspernatur quia sequi labore.</td>
      <td>Ad tempore laudantium sed temporibus.</td>
      <td>Officia accusamus architecto perferendis quod?</td>
      <td>Laudantium facilis numquam quas iusto!</td>
      <td>Doloribus tenetur deleniti voluptatum alias.</td>
    </tr>
    <tr>
      <td>Ratione suscipit quis repudiandae ipsam!</td>
      <td>Repellendus blanditiis iure vel delectus.</td>
      <td>Sunt debitis voluptatum consectetur aliquam!</td>
      <td>Libero expedita odio maiores optio!</td>
      <td>Nam molestias delectus quam porro.</td>
    </tr>
    <tr>
      <td>Earum delectus sint ab error?</td>
      <td>Dicta ipsam facilis optio aliquam?</td>
      <td>Blanditiis eligendi sit ad accusamus?</td>
      <td>Sequi laborum illo eos incidunt?</td>
      <td>Necessitatibus iure sequi eaque quam!</td>
    </tr>
    <tr>
      <td>Illum aspernatur fuga laborum ratione!</td>
      <td>Maiores, excepturi! Dolorum, aspernatur mollitia.</td>
      <td>Labore corrupti itaque provident adipisci.</td>
      <td>Ipsum ducimus earum minus fuga.</td>
      <td>Necessitatibus rerum molestias autem libero.</td>
    </tr>
    <tr>
      <td>Nemo omnis similique labore minima!</td>
      <td>Dolore dolores saepe ea adipisci.</td>
      <td>Voluptate iusto in unde quas.</td>
      <td>Quod aperiam sit ut iusto.</td>
      <td>Quidem quisquam cupiditate dolor officiis.</td>
    </tr>
    <tr>
      <td>Officia numquam aliquam qui nulla.</td>
      <td>Laboriosam repellendus soluta aliquid similique.</td>
      <td>Veritatis, neque porro? Quae, quia?</td>
      <td>Magnam vel autem ad blanditiis!</td>
      <td>Laboriosam, a. Sunt, suscipit deserunt!</td>
    </tr>
    <tr>
      <td>Aspernatur iste saepe beatae nam.</td>
      <td>Ducimus quisquam corrupti quam inventore?</td>
      <td>Sit ullam minus possimus quidem!</td>
      <td>Officiis laborum laudantium veritatis et!</td>
      <td>Impedit dignissimos dolores maxime sequi.</td>
    </tr>
    <tr>
      <td>Neque similique cum sequi unde!</td>
      <td>Voluptatibus, ad? Ullam, facilis cumque.</td>
      <td>Enim in magnam id illo!</td>
      <td>Ex nobis quidem voluptatem voluptate.</td>
      <td>Eligendi esse ipsa ipsam omnis!</td>
    </tr>
    <tr>
      <td>Neque, fugit. Tempora, voluptates vel.</td>
      <td>Officia cupiditate dolores magni sunt?</td>
      <td>Eveniet tempore illo ipsa? Non.</td>
      <td>Possimus repellendus eligendi ipsam necessitatibus!</td>
      <td>Quisquam natus eos omnis ea.</td>
    </tr>
    <tr>
      <td>Aliquam voluptas recusandae et animi?</td>
      <td>Quis distinctio officiis quisquam dolores.</td>
      <td>Repellendus suscipit vero delectus hic.</td>
      <td>Quae asperiores temporibus impedit quis.</td>
      <td>Temporibus ipsa quidem magnam odio.</td>
    </tr>
    <tr>
      <td>Voluptatem optio quas nesciunt debitis!</td>
      <td>Hic mollitia alias laborum accusantium?</td>
      <td>Obcaecati eaque corrupti aperiam culpa!</td>
      <td>Voluptatum sequi sed numquam eos!</td>
      <td>Laborum exercitationem deleniti quaerat dolorem.</td>
    </tr>
    <tr>
      <td>Modi nam asperiores totam excepturi.</td>
      <td>Quod ipsa dolorem magni labore.</td>
      <td>Qui quidem quod eum quasi!</td>
      <td>Explicabo, ut eveniet. Quos, nam?</td>
      <td>Harum fugit sequi blanditiis accusamus.</td>
    </tr>
    <tr>
      <td>Ullam dolores vel natus in?</td>
      <td>Dolor velit dolorum quos error!</td>
      <td>Obcaecati blanditiis natus aperiam esse.</td>
      <td>Consequatur quasi qui minima laboriosam.</td>
      <td>Voluptatum, et atque. Iste, earum?</td>
    </tr>
    <tr>
      <td>Voluptate esse placeat doloribus hic?</td>
      <td>Dolorum velit ab incidunt quam.</td>
      <td>Laboriosam facere sed quia nisi.</td>
      <td>Saepe ex officia libero beatae?</td>
      <td>Ipsam ab distinctio assumenda itaque!</td>
    </tr>
    <tr>
      <td>Perferendis facere natus accusantium ut.</td>
      <td>Ipsam possimus dolores corporis totam!</td>
      <td>Ab officia rerum tempora ipsum.</td>
      <td>Id, soluta neque! Voluptatibus, id.</td>
      <td>Eaque enim fugiat corporis velit!</td>
    </tr>
    <tr>
      <td>Voluptatum cum atque eos quod.</td>
      <td>Esse corporis mollitia voluptatem ipsum.</td>
      <td>Corrupti unde inventore similique ad?</td>
      <td>Blanditiis dolorum molestiae minus tempore.</td>
      <td>Temporibus nihil doloremque quibusdam! Voluptatem!</td>
    </tr>
    <tr>
      <td>Iste voluptates iusto facilis cum?</td>
      <td>At est necessitatibus architecto repellendus?</td>
      <td>Officia qui soluta veniam nemo.</td>
      <td>Nobis cupiditate officiis reiciendis possimus.</td>
      <td>Voluptatibus quidem assumenda adipisci quis.</td>
    </tr>
    <tr>
      <td>Illum voluptatibus reprehenderit repellendus nostrum?</td>
      <td>Distinctio natus harum est nulla?</td>
      <td>Temporibus sit consequatur delectus ducimus.</td>
      <td>Veniam possimus qui fugiat temporibus.</td>
      <td>Delectus tenetur asperiores quasi perspiciatis.</td>
    </tr>
    <tr>
      <td>Quod atque ut doloribus libero?</td>
      <td>Animi assumenda praesentium alias accusantium!</td>
      <td>Labore ex optio eveniet architecto.</td>
      <td>Eaque delectus nemo fugiat dolorum.</td>
      <td>Atque, delectus. Obcaecati, saepe veritatis.</td>
    </tr>
  </tbody>
</table>