基于选择值筛选表格行

我需要根据选择值筛选表格行。当选定值为“”（空）时，表必须隐藏。如果选择值是让我们说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 
      }); 
    }); 
});

这里是工作plunker

如果您需要任何其他信息，请让我知道，我会提供。先谢谢你。

来源

2017-01-09 Valor_

你有控制标记吗？例如，您可以更改表格标记吗？如果你可以在标记中添加一些属性，这将会更简单：例如''。 –

是的，我有控制标记 –

可以过滤基础上，td的内容包含ID S中的行：

你数据集必须是$('#myTable tbody').find('tr')所以taht它不显示/隐藏thead
首先显示全部表tr s使用dataset.show()

现在筛选tr是你们等不需要显示使用此：

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>

来源

2017-01-09 18:23:08 kukkuz

我喜欢解释槽代码和解决方案！谢谢 –

尝试使用代码如下

$("#mySelector").on("change", 
      function(){ 
       var a = $(this).find("option:selected").html(); 

       $("table tr td:first-child").each(
        function(){ 
         if($(this).html() != a){ 
          $(this).parent().hide(); 
         } 
         else{ 
          $(this).parent().show(); 
         } 
        }); 
      });

来源

2017-01-09 18:24:44 GSB

这里，你可以使用:contains()选择测试here

$(function() { 
    $('table').hide(); 
    $('#mySelector').change(function(){ 
     $('table').show(); 
     var selection = $(this).val(); 
     var dataset = $('#myTable').find('tr'); 

     dataset.each(function(index) { 
     item = $(this); 
     item.hide(); 

     var firstTd = item.find('td:first-child'); 
     var text = firstTd.text(); 
     var ids = text.split(','); 

     for (var i = 0; i < ids.length; i++) 
     { 
      if (ids[i] == selection) 
      { 
      item.show(); 
      } 
     } 
     }); 
    }); 
});

来源

2017-01-09 18:27:19

简短的解决方案解决：

$(document).ready(function($) { 
    $('table').hide(); 

    $('#mySelector').change(function(){ 
     var selection = $(this).val(); 
     $('table')[selection? 'show' : 'hide'](); 

     if (selection) { // iterate only if `selection` is not empty 
     $.each($('#myTable tbody tr'), function(index, item) { 
      $(item)[$(item).is(':contains('+ selection +')')? 'show' : 'hide'](); 
     }); 
     } 

    }); 
});

测试环节：https://plnkr.co/edit/zNQNFVBIPSyPjEyU7I1J?p=preview

http://api.jquery.com/contains-selector/

来源

2017-01-09 18:29:20 RomanPerekhrest

基于选择值筛选表格行

回答

相关问题