带下拉列表的过滤器表 [英] Filter table with dropdown

问题描述

我有一个table，想过滤最后两列，Archived和Full Entry.归档的第4列将带有日期或为空.第五列完整条目为true或false.我有两个下拉菜单，第一个下拉菜单的逻辑应为:

I have a table and want to filter the last two columns, Archived and Full Entry. The 4th column archived will either have a date or be empty. The 5th column full entry will either be true or false. I have two dropdowns, the logic of the first dropdown should:

1. 如果选择已存档"，则过滤第4列以仅显示行 第四列为空.

1. If Archived is selected, filter the 4th column to show only rows where 4th column is empty.

如果选择了未归档"，则过滤第4列以仅显示行 第四列不为空.

If Not archived is selected, filter 4th column to show only rows where 4th column is not empty.

如果选择全部，则在此列中全部显示

If All selected, show all in this column

还有

1. 如果第二个下拉列表选择True，则过滤第5列以显示 仅第5列包含true的行.

1. If True is selected for second dropdown, filter 5th column to show only rows where 5th column contains true.

....如果为false过滤第5列，其中行等于false ...

.... If false filter 5th column where rows equal to false...

...如果全部显示在第5列中.

... If all show all in 5th column.

我无法使脚本适用于存档.感谢您的帮助

I cannot get the script to work for Archive. Thanks for any help

$(function() {
  $('#archive').change(function() {
    if ($(this).val() == "archived") {
      $("#filter").find("td:nth-child(3):not(:empty)")
    } else {
      $("#filter").find("td:nth-child(3):empty")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="archived">Archived</option>
  <option value="not-archived">Not Archived</option>
</select>

<label for="type">Filter Full Entry</label>
<select id="type" name="type">
  <option value="all">All</option>
  <option value="true" selected>True</option>
  <option value="false" selected>False</option>
</select>

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>Ref</th>
      <th>Edit</th>
      <th>Name</th>
      <th>Archived</th>
      <th>Full Entry</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>True</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
      <td>False</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>6</td>
      <td></td>
      <td>True</td>
    </tr>
  </tbody>
</table>

推荐答案

您的逻辑是正确的，只是不完整.另外请注意，archived列是nth-child(4)而不是3，因为它是从1开始的，而不是从0开始的.

Your logic is on the right lines, but just incomplete. Also note that the archived column is nth-child(4), not 3, as it's 1-based, not 0-based.

为简化逻辑，您可以创建一个函数，该函数在更改两个过滤器select元素中的任何一个时运行.此功能将首先显示所有行，然后隐藏所有与所选过滤器选项不匹配的行，如下所示:

To simplify the logic you can create a function which runs when either of the filter select elements are changed. This function will first show all rows and then hide all those which do not match the filter option chosen, like this:

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

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

  if (archive == "archived") {
    $rows.filter(":has(td:nth-child(4):empty)").hide()
  } else if (archive == "not-archived") {
    $rows.filter(":has(td:nth-child(4):not(:empty))").hide()
  }

  if (entry == "true") {
    $rows.filter(":has(td:nth-child(5):contains('False'))").hide()
  } else if (entry == "false") {
    $rows.filter(":has(td:nth-child(5):contains('True'))").hide()
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="archived">Archived</option>
  <option value="not-archived">Not Archived</option>
</select>

<label for="type">Filter Full Entry</label>
<select id="type" name="type">
  <option value="all">All</option>
  <option value="true" selected>True</option>
  <option value="false" selected>False</option>
</select>

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>Ref</th>
      <th>Edit</th>
      <th>Name</th>
      <th>Archived</th>
      <th>Full Entry</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>True</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
      <td>False</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>6</td>
      <td></td>
      <td>True</td>
    </tr>
  </tbody>
</table>

这篇关于带下拉列表的过滤器表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！