时间戳

首页 > 解决方案 > 逆表搜索

javascript - 逆表搜索

问题描述

我有一个表格搜索，但我想做一个反向搜索。<input type="checkbox" checked>在我的 jQuery 代码中，当 a为 false时，如何交换 .hide() -> .show() 和 .show() -> .hide() 。当检查复选框时，请撤消所有内容。

<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" checked>
<table id="myTable" border="1">
    <thead>
        <tr class="myHead">
            <th>XDFFD</th>
            <th>DFDDY</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

    $('#search_field').on('keyup', function() {
        var value = $(this).val();
        var patt = new RegExp(value, "i");
        $('#myTable').find('tr').each(function() {
            if (!($(this).find('td').text().search(patt) >= 0)) {
                $(this).not('.myHead').hide();
            }
            if (($(this).find('td').text().search(patt) >= 0)) {
                $(this).show();
            }
        });
    });

标签： javascriptjqueryhtml-table

解决方案

这是一个替代版本，它使用一个小的 jQuery 扩展来:contains()区分大小写：

// jQuery extension from https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
 return function( elem ) {return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; };
});

$('input').on('input', function() {
  $('#myTable tbody tr').each((i,tr)=>$(tr).toggle
    ( $('td:contains('+$('#search_field').val()+')',tr).length>0 === $(".checkbox").is(":checked") )
  )
}).first().focus();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" class="checkbox" checked>
<table id="myTable" border="1">
  <thead>
    <tr class="myHead">
      <th>XDFFD</th>
      <th>DFDDY</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 one</td>
      <td>2 two</td>
    </tr>
    <tr>
      <td>3 Three</td>
      <td>4 Four</td>
    </tr>
    <tr>
      <td>5 FIVE</td>
      <td>6 SIX</td>
    </tr>
  </tbody>
</table>

两个布尔值的===比较实际上类似于两个表达式之间的异或条件。结果将是true如果两个 或没有一个表达式

$('td:contains('+$('#search_field').val()+')',tr).length>0

和

$(".checkbox").is(":checked")

是true。这将直接在.toggle()方法中使用来显示或隐藏当前的<tr>.

推荐阅读