如何在过滤时排除 class 隐藏行和无打印行
How can I exclude class hidden and noprint rows while filtering
我有一个 table,其中包含一些隐藏的和没有 printable 的单元格。
我有一个脚本可以在 table 中搜索并显示需要的单元格,
但是这个脚本不能排除 hidden 和 noprint <td>
s。
你能帮我解决这个问题吗?
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"></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"></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"></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"></i></a>
</td> <!-- DONT WANNA SEE IN RESULT -->
</tr>
</tbody>
</table>
试试这个:
在这种情况下,header(即: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:not(.hidden,.noprint)排除hidden和noprint 类.
我有一个 table,其中包含一些隐藏的和没有 printable 的单元格。
我有一个脚本可以在 table 中搜索并显示需要的单元格,
但是这个脚本不能排除 hidden 和 noprint <td>
s。
你能帮我解决这个问题吗?
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"></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"></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"></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"></i></a>
</td> <!-- DONT WANNA SEE IN RESULT -->
</tr>
</tbody>
</table>
试试这个:
在这种情况下,header(即: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:not(.hidden,.noprint)排除hidden和noprint 类.