逆表搜索。。

Question

我有一个表搜索，但我想进行反向搜索。<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();            }        });    });

Answer 1

您检查复选框是否checked使用is(":checked")这将给出 true 或 false，因此取决于此显示或隐藏 trs。

演示代码：

$('#search_field').on('keyup', function() {

  var value = $(this).val();

  var patt = new RegExp(value, "i");

  var checks = $(".checkbox").is(":checked"); //check if checkbox is checked

  console.log(checks)

  if (value != "") {

    $('#myTable tbody').find('tr').each(function() {

      var condition = $(this).find('td').text().search(patt) >= 0

      //checked

      if (checks) {

        //show and hide..

        condition ? $(this).show() : $(this).hide()

      } else {

        condition ? $(this).hide() : $(this).show()

      }

    });

  } else {

    $('#myTable tbody > tr').show()

  }

});

<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</td>

      <td>2</td>

    </tr>

    <tr>

      <td>3</td>

      <td>4</td>

    </tr>

    <tr>

      <td>5</td>

      <td>6</td>

    </tr>

  </tbody>

</table>

Answer 2

这是一个替代版本，使用一个小的 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>.