Question

我需要使用带有jQuery的下拉框来过滤表格的行。我无法弄清楚如何将选项的值与表行的数据类型联系起来。

HTML：

<label for="filter">Type:</label>
<select id="filter>
    <option value="all">All Steps</option>
    <option value="standard">Standards</option>
    <option value="review">Reviews</option>
</select>

<table id="table>
    <tr id="one" class="row" data-type="standard">
        <td>Standard</td>
    </tr>
    <tr id="one" class="row" data-type="review">
        <td>Reviews</td>
    </tr>
</table>

JS：

$("#filter").change(function () {
$("#table").find(data-type).each(function () {
    if ($(this).text() != $("#filter").val()) 
        $(this).hide();
    else 
        $(this).parent().show();
    if ($("#filter").val() == "all") 
        $(this).show();
    });
});

这里的jQuery只是根据我迄今为止通过研究发现的内容拼凑而成。将data-type属性保留在表行中非常重要。

我对jQuery很新，所以一切都有帮助！

这是代码笔：http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111

Answer 1

您可以使用.val();

找到所选的值

您获得了.val()与$('.row');

匹配所需的所有行

当你找到一个匹配隐藏所有行时循环所有行，然后只显示你想要的东西，b / c计算机这么快就这么快就好了

.each(function(index, element) {});

现在你有了一个过滤器

编辑：只需移动隐藏在循环之外的所有内容。

$(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.row'); 
      
    row.hide()
    row.each(function(i, el) {
         if($(el).attr('data-type') == filterValue) {
             $(el).show();
         }
    })
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="filter">Type:</label>
<select class="filter" data-tableId="table1">
  <option value="all">All Steps</option>
  <option value="standard">Standards</option>
  <option value="review">Reviews</option>
  <option value="inspection">Inspections</option>    <option value="payment">Payments</option>
  <option value="document">Documents</option>
</select>

<table id="table1">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two"  class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
  </tr>
   <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two"  class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
</table>

Answer 2

您可以将js功能修改为

$(document).ready(function() {
       var $rows = $('table tr');
       $("#filter").change(function() {

           var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
               reg = RegExp(val, 'i'),
               text;
           if ($(this).val() !== 'all') {

               $rows.show().filter(function() {
                   text = $(this).data('type').replace(/\s+/g, ' ');
                   return !reg.test(text);
               }).hide();

           } else {
               $rows.show();
           }
       });
   });

请参阅此工作Fiddle。

Answer 3

除了@ wlin的答案对于下拉列表中的“全部”值。

$("#filter").change(function() {
  console.clear();
  var filterValue = $(this).val();
  var row = $('.row');

  row.each(function(i, el) {
    if ($(el).attr('data-type') == filterValue) {
      row.hide()
      $(el).show();
    }
  });
// In Addition to Wlin's Answer (For "All" value)
  if ("all" == filterValue) {
    row.show();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="filter">Type:</label>
<select id="filter">
  <option value="all">All Steps</option>
  <option value="standard">Standards</option>
  <option value="review">Reviews</option>
  <option value="inspection">Inspections</option>
  <option value="payment">Payments</option>
  <option value="document">Documents</option>
</select>

<table id="table">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two" class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
  </tr>
</table>

带有下拉框的jQuery过滤器，使用数据类型

3 个答案: