Question

我在这里有一个有效的例子：

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

你可以看到，如果你在选择框中选择“标记”，它将过滤我的表并同时显示：

John Mark

和

马克诗人

我只希望它在第二列上过滤...所以只显示Mark Poet。

我感谢任何有用的提示。

$(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']();
            });
        }

    });
});

Answer 1

您必须将选择减少到所需的td，例如

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

注意：减少each级别的选择将不起作用，因为您不会隐藏wole行，而是单独隐藏每个td

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

Answer 2

考虑使用td css selctor选择nth-child(n)元素。

e.g。

td:nth-child(2)

或

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

Answer 3

你可以尝试$（＆＃34; #myTable tbody tr td：nth-child（2）＆＃34;）。这应该工作

Answer 4

假设您总是希望过滤第二列，这将起作用：

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

Answer 5

只需要定位第二个td td:eq(1) ...索引从0开始。

此外，.表示法更具可读性，因此我使用.show()和.hide()。

此外，我不明白为什么你会显示或隐藏表本身，但如果这是无意的，只需在过滤之前显示所有行。当选择“请选择”时，这将显示所有行。目前做出选择然后选择“请选择”将完全隐藏表格。所以你可以使用如下代码：

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>

特定列上的筛选表

5 个答案: