亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

逆表搜索。。

逆表搜索。。

寶慕林4294392 2023-10-14 17:02:30
我有一個表搜索，但我想進行反向搜索。<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();            }        });    });
查看完整描述

2 回答

?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

您檢查復選框是否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>


查看完整回答
反對 回復 2023-10-14
?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

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


查看完整回答
反對 回復 2023-10-14
  • 2 回答
  • 0 關注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號