フィルタリング中にクラスの非表示行と非表示行を除外する方法

Question

印刷可能なセルがいくつか隠れている表があります。 そして、私はこのテーブルで検索し、希望のセルを表示するスクリプトを持っています しかし、このスクリプトは非表示とnoprint <td>を除外することはできません。 この問題について教えてもらえますか？

var $rows_ku = $('#ku_list tr'); 
 
$('#search_ku').keyup(function() { 
 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
 

 
    $rows_ku.show().filter(function() { 
 
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
 
    return !~text.indexOf(val); 
 
    }).hide(); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet" /> 
 
<style> 
 
    .hidden { 
 
    visibility: hidden; 
 
    } 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="activeuserlist" class="col m12"> 
 
    <div class="card grey white"> 
 

 
    <div class="col s12 m2 l12 grey lighten-4 black-text"> 
 
     <div class="input-field col s10 "> 
 
     <i class="material-icons prefix astron-text">&#xe8b6;</i> 
 
     <input type="text" id="search_ku" placeholder="Filter"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="card-action"> 
 
    <table id="ku_list" class="bordered responsive-table"> 
 
    <thead> 
 
     <tr> 
 
     <td class="hidden">Entry</td> 
 
     <th data-field="id">Kullanıcı Adı</th> 
 
     <th data-field="id">IP adresi</th> 
 
     <th data-field="mac">Mac Adresi</th> 
 
     <th data-field="session">Bağlantı Başlangıç</th> 
 
     <th data-field="activity">Son İşlem Tarihi</th> 
 
     <th class="noprint" data-field='action'>Hareket</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="hidden">3b5970d4fa815391</td> <!-- DONT WANNA SEE IN RESULT --> 
 
     <td>5081@otel</td> 
 
     <td>192.168.26.101</td> 
 
     <td>4c:7c:5f:04:6c:16</td> 
 
     <td>2016-05-12 09:47:55</td> 
 
     <td>2016-05-12 14:33:07</td> 
 
     <td class="noprint"><a href="#modalkes" onclick="SetId('3b5970d4fa815391');" class="btn-floating red modal-trigger"><i class="material-icons">&#xe047;</i></a> 
 
     </td> <!-- DONT WANNA SEE IN RESULT --> 
 
     </tr> 
 
     <tr> 
 
     <td class="hidden">3dd66a5ec453e31d</td> <!-- DONT WANNA SEE IN RESULT --> 
 
     <td>6082@otel</td> 
 
     <td>192.168.26.214</td> 
 
     <td>34:51:c9:bc:f0:1e</td> 
 
     <td>2016-05-12 10:12:02</td> 
 
     <td>2016-05-12 17:32:30</td> 
 
     <td class="noprint"><a href="#modalkes" onclick="SetId('3dd66a5ec453e31d');" class="btn-floating red modal-trigger"><i class="material-icons">&#xe047;</i></a> 
 
     </td> <!-- DONT WANNA SEE IN RESULT --> 
 
     </tr> 
 
     <tr> 
 
     <td class="hidden">108587eeb185d040</td> <!-- DONT WANNA SEE IN RESULT --> 
 
     <td>6104@otel</td> 
 
     <td>192.168.26.51</td> 
 
     <td>90:fd:61:49:89:bc</td> 
 
     <td>2016-05-12 10:22:52</td> 
 
     <td>2016-05-12 17:31:50</td> 
 
     <td class="noprint"><a href="#modalkes" onclick="SetId('108587eeb185d040');" class="btn-floating red modal-trigger"><i class="material-icons">&#xe047;</i></a> 
 
     </td> <!-- DONT WANNA SEE IN RESULT --> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Answer 1

これを試してください。この場合

ヘッダ（すなわち：THEAD）コンテンツ常に表示。

var $rows_ku = $('#ku_list tbody tr'); 
    $('#search_ku').keyup(function() { 
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

     $rows_ku.show().filter(function() { 
      var text = $(this).find('td:not(.hidden,.noprint)').text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
    }).hide();}); 

セレクタTD：いない（.hidden、.noprint）は隠さとNOPRINTクラスを除外する。