简体   繁体   English

特定列上的过滤表

[英]Filter table on specific column

I have a working example over here: 我在这里有一个工作示例:

https://plnkr.co/edit/g6geH12xCI8EirNvghsW?p=preview https://plnkr.co/edit/g6geH12xCI8EirNvghsW?p=preview

you can see that if you select "Mark" in the select box it will filter my table and show both: 您会看到,如果在选择框中选择“标记”,它将过滤我的表格并同时显示两者:

John Mark 约翰·马克

and

Mark Poet 马克·波特

and I only want it to filter on the 2nd column... so show Mark Poet ONLY. 而且我只希望它在第二列上进行过滤...所以只显示Mark Poet。

I appreciate any helpful tips. 我感谢任何有用的提示。

$(document).ready(function ($) {


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

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

    });
});

You have to reduce your selection to the desired td, for example like that 您必须将选择减少到所需的td,例如这样

$(item)[$(item).find('td:nth-child(2)').is(':contains('+ selection +')')? 'show' : 'hide']();

NOTE: reducing the selection at the each level won't work, because you wouldn't hide the wole row but each td individually 注意:在each级别上减少选择将不起作用,因为您不会隐藏无效行,而是单独隐藏每个td

working example: https://plnkr.co/edit/yabW9OgQEE5Fb3efF8Q0?p=preview 工作示例: https : //plnkr.co/edit/yabW9OgQEE5Fb3efF8Q0?p=preview

Consider selecting the td elements using the nth-child(n) css selctor. 考虑使用nth-child(n) css选择器选择td元素。

eg 例如

td:nth-child(2)

or 要么

$("#myTable tbody tr td:nth-child(2)")

you can try $("#myTable tbody tr td:nth-child(2)"). 您可以尝试$(“#myTable tbody tr td:nth-​​child(2)”)。 this should work 这应该工作

Assuming that you always want to filter on the 2nd column, this would work: 假设您总是要在第二列进行过滤,则可以这样做:

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

    if (selection) {
      $('#myTable tbody tr').each(function() {
        var $name = $(this).find("td").first().next();
        var $row = $name.parent();
        if ($name.text() != selection) {
          $row.hide();
        } else {
          $row.show();
        }
      });
    }
  });
});

Just need to target second td with td:eq(1) ... index starts from 0 . 只需使用td:eq(1) ...定位第二个td ,索引从0开始。

Also, the . 另外, . notation is more readable, so I'd use .show() and .hide() . 符号更易读,因此我将使用.show().show() .hide()

Further, I didn't get why you would show or hide the table itself, but if that's unintentional, just show all the rows before filtering instead. 此外,我不知道为什么要显示或隐藏表本身,但是,如果不是故意的,则只需在过滤之前显示所有行即可。 That will display all rows when "Please Select" is selected. 当选择“请选择”时,将显示所有行。 At present after making a selection and then selecting "please select" will hide the table completely. 目前,在做出选择之后再选择“请选择”将完全隐藏该表。 So you can use code like: 因此,您可以使用如下代码:

https://plnkr.co/edit/M5dyYwiL4ZO9qwnZMMKc?p=preview https://plnkr.co/edit/M5dyYwiL4ZO9qwnZMMKc?p=preview

 $(document).ready(function($) { $('#mySelector').change(function() { var selection = $(this).val(), row = $('#myTable tbody tr'); row.show(); // show all rows to ensure no row remains hidden if (selection) { // hide the row that doesn't contain selected val td:eq(1) row.filter(function(index, item) { return $(item).find('td:eq(1)').text().indexOf(selection) === -1; }).hide(); } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <select id='mySelector' class="styled-select slate"> <option value="">Please Select</option> <option value='John'>John</option> <option value='Mark'>Mark</option> <option value='Ace'>Ace</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>John</td> <td>Mark</td> </tr> <tr> <td>3</td> <td>Mark</td> <td>Poet</td> </tr> <tr> <td>2,3</td> <td>Ace</td> <td>Ventura</td> </tr> </tbody> </table> </body> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM