根据选择值过滤表格行 [英] Filter table rows based on select value

问题描述

我需要根据选择值过滤表格行。当选择的值为（空）时，必须隐藏表。如果select值为1，则表必须是可见的，并且它必须仅显示第一个表列保持值为1的行。

I need to filter table rows based on select value. When selected value is "" (empty) table must be hidden. If select value is lets say 1, table must be visible and it must show only rows where first table column hold value 1.

问题是此id列保持多个像1,2这样的ID。
因为我的JQuery技能不是最好的我需要你帮我完成我的代码

The problem is that this id column hold multiple ids like 1,2. Since my JQuery skill are not the best i need you guys to help me complete my code

我的选择器

<select id='mySelector'>
   <option value="">Please Select</option>
   <option value='1'>A</option>
   <option value='2'>B</option>
   <option value='3'>C</option>
</select>

我的表

<table id='myTable'>
   <thead>
      <tr>
         <th>ids</th>
         <th>name</th>
         <th>address</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1,2</td>
         <td>Jhon</td>
         <td>Doe</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Mike</td>
         <td>Poet</td>
      </tr>
      <tr>
         <td>2,3</td>
         <td>Ace</td>
         <td>Ventura</td>
      </tr>
   </tbody>
 </table>

我的剧本

$(document).ready(function($) {
    $('table').hide();
    $('#mySelector').change( function(){
      $('table').show();
      var selection = $(this).val();
      var dataset = $('#myTable').find('tr');
          $.each(dataset, function(index, item) {
            //help
          });
    });
});

这里有工作 plunker

如果您需要任何其他信息，请告诉我，我会提供。提前谢谢。

If you need any additional information, please let me know and I will provide. Thank you in advance.

推荐答案

您可以根据<$的内容过滤行c $ c> td 包含 id s：

You can filter the row based on the content of the td that contains the ids:

1. 您的数据集必须是 $（'＃myTable tbody'）。find（'tr'）所以它不会显示/隐藏 thead

1. Your dataset must be $('#myTable tbody').find('tr') so taht it does not show / hide the thead

首先显示所有表 tr s使用 dataset.show（）

First show all the table trs using dataset.show()

现在过滤 tr s你不需要使用它来显示：

Now filter the trs that you don't need to be shown using this:

dataset.filter(function(index, item) {
  return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
}).hide();

见下面的演示：

$(document).ready(function($) {
  $('table').hide();
  $('#mySelector').change(function() {
    $('table').show();
    var selection = $(this).val();
    var dataset = $('#myTable tbody').find('tr');
    // show all rows first
    dataset.show();
    // filter the rows that should be hidden
    dataset.filter(function(index, item) {
      return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
    }).hide();

  });
});

/* Styles go here */

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.styled-select.slate {
  height: 34px;
  width: 240px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="script.js"></script>

<select id='mySelector' class="styled-select slate">
  <option value="">Please Select</option>
  <option value='1'>A</option>
  <option value='2'>B</option>
  <option value='3'>C</option>
</select>
<br>
<br>
<br>
<table id='myTable'>
  <thead>
    <tr>
      <th>ids</th>
      <th>name</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1,2</td>
      <td>Jhon</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>Poet</td>
    </tr>
    <tr>
      <td>2,3</td>
      <td>Ace</td>
      <td>Ventura</td>
    </tr>
  </tbody>
</table>

这篇关于根据选择值过滤表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！