根据选择值过滤表格行

Question

我需要根据选择值过滤表行.当选择的值为""(空)时,必须隐藏表.如果select值为1,则表必须可见,并且必须仅显示第一个表列保持值为1的行.

问题是这个id列包含多个id,如1,2.由于我的JQuery技能不是最好的,我需要你们帮我完成我的代码

我的选择器

<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
          });
    });
});

这里有工作人员

如果您需要任何其他信息,请告诉我,我会提供.先感谢您.

Answer 1

您可以根据包含id的内容过滤行:td

1. 你的数据集必须是$('#myTable tbody').find('tr')这样的,它不会显示/隐藏thead

2. 首先显示所有表格tr使用dataset.show()

3. 现在过滤掉tr您不需要显示的s:

   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>