逆表搜索。。

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() {&nbsp; var value = $(this).val();&nbsp; var patt = new RegExp(value, "i");&nbsp; var checks = $(".checkbox").is(":checked"); //check if checkbox is checked&nbsp; console.log(checks)&nbsp; if (value != "") {&nbsp; &nbsp; $('#myTable tbody').find('tr').each(function() {&nbsp; &nbsp; &nbsp; var condition = $(this).find('td').text().search(patt) >= 0&nbsp; &nbsp; &nbsp; //checked&nbsp; &nbsp; &nbsp; if (checks) {&nbsp; &nbsp; &nbsp; &nbsp; //show and hide..&nbsp; &nbsp; &nbsp; &nbsp; condition ? $(this).show() : $(this).hide()&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; condition ? $(this).hide() : $(this).show()&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; } else {&nbsp; &nbsp; $('#myTable tbody > tr').show()&nbsp; }});<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">&nbsp; <thead>&nbsp; &nbsp; <tr class="myHead">&nbsp; &nbsp; &nbsp; <th>XDFFD</th>&nbsp; &nbsp; &nbsp; <th>DFDDY</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>5</td>&nbsp; &nbsp; &nbsp; <td>6</td>&nbsp; &nbsp; </tr>&nbsp; </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) {&nbsp;return function( elem ) {return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; };});$('input').on('input', function() {&nbsp; $('#myTable tbody tr').each((i,tr)=>$(tr).toggle&nbsp; &nbsp; ( $('td:contains('+$('#search_field').val()+')',tr).length>0 === $(".checkbox").is(":checked") )&nbsp; )}).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">&nbsp; <thead>&nbsp; &nbsp; <tr class="myHead">&nbsp; &nbsp; &nbsp; <th>XDFFD</th>&nbsp; &nbsp; &nbsp; <th>DFDDY</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>1 one</td>&nbsp; &nbsp; &nbsp; <td>2 two</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>3 Three</td>&nbsp; &nbsp; &nbsp; <td>4 Four</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>5 FIVE</td>&nbsp; &nbsp; &nbsp; <td>6 SIX</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>两个布尔值的比较===实际上类似于两个表达式之间的异或条件。结果将是true如果两个&nbsp;或都不存在表达式$('td:contains('+$('#search_field').val()+')',tr).length>0和$(".checkbox").is(":checked")是true。并且这将直接在方法中使用来.toggle()显示或隐藏当前的<tr>.