Javascript 对2个表使用相同的搜索筛选器
我想对两个表使用相同的搜索筛选器。现在它只适用于一张桌子Javascript 对2个表使用相同的搜索筛选器,javascript,jquery,html,Javascript,Jquery,Html,我想对两个表使用相同的搜索筛选器。现在它只适用于一张桌子 var $rows1 = $('#dev-table tbody tr '); $('#dev-table-filter ').keyup(function () { var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', reg = RegExp(val, 'i'), tex
var $rows1 = $('#dev-table tbody tr ');
$('#dev-table-filter ').keyup(function () {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows1.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
var $rows2 = $('#nav-table tbody tr ');
$('#dev-table-filter ').keyup(function () {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows2.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
<div class="panel panel-primaray table-responsive" style="border-color:none !important">
<div class="panel-heading">
<input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table"
placeholder="Search by your will" />
</div>
<div class="panel-body ">
<div class="table-responsive">
<table class="table table-bordered" id="dev-table">
<thead>
<tr style="color: #0078AA">
<th align="center" class="text-center">Airline</th>
<th align="center" class="text-center">Airline Code</th>
<th align="center" class="text-center">Checked Baggage (At a cost)</th>
<th align="center" class="text-center">Hand Baggage</th>
<th align="center" class="text-center">Child Hand Baggage Allowance</th>
<th align="center" class="text-center">First/Business</th>
<th align="center" class="text-center">Frequent Flyer</th>
<th align="center" class="text-center">Excess Charge</th>
<th align="center" class="text-center">Airline Page</th>
</tr>
</thead>
<tbody class="atag">
<tr>
<td class="text-center heading-row" colspan="9">Low Cost Carriers</td>
</tr>
<tr>
<td width="142">cell</td>
<td width="84">cell</td>
<td width="183">cell</td>
<td width="412">cell</td>
<td width="200">cell</td>
<td width="95">-</td>
<td width="99">-</td>
<td width="94">-</td>
<td class="bagss" align="center" height="35">
<a href="#" target="_blank">
cell
</a>
</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td class="bagss" align="center" height="35">
<a href="#"
target="_blank">cell</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered " id=" nav-table">
<thead >
<tr id="myP" style="color: #0078AA">
<th align="center" class="text-center" id="tr1">Airline</th>
<th align="center" class="text-center" id="tr2">Airline <br />Code</th>
<th align="center" class="text-center" id="tr3">Checked Baggage</th>
<th align="center" class="text-center" id="tr4">Hand Baggage</th>
<th align="center" class="text-center" id="tr5">Child Allowance</th>
<th align="center" class="text-center" id="tr6">First/Business</th>
<th align="center" class="text-center" id="tr7">Frequent Flyer</th>
<th align="center" class="text-center" id="tr8">Excess Charge</th>
<th align="center" class="text-center" id="tr9">Airline Page</th>
</tr>
</thead>
<tbody class="atag">
<tr style="color: #0078AA">
<td colspan="9" class="text-center heading-row">A</td>
</tr>
<tr>
<td align="center" height="35" width="115" class="bagss">cell</td>
<td align="center" height="35" width="57" class="bagss">cell</td>
<td align="center" height="35" width="114" class="bagss">cell</td>
<td align="center" height="35" width="92" class="bagss">cell</td>
<td align="center" height="35" width="74" class="bagss">cell</td>
<td align="center" height="35" width="94" class="bagss">cell</td>
<td align="center" height="35" width="81" class="bagss"></td>
<td align="center" height="35" width="126" class="bagss">cell</td>
<td align="center" height="35" width="114" class="bagss">
<a target="_blank"
href="#">
cell
</a>
</td>
</tr>
<tr>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">2cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">cell</td>
<td align="center" height="35" class="bags">
<a target="_blank"
href="#">
cell
</a>
</td>
</tr>
<tr>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">5cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">cell</td>
<td align="center" height="35" class="bagss">
<a target="_blank"
href="#">
cell
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
航空公司
航空公司代码
托运行李（收费）
小件寄存处
儿童手提行李津贴
第一/业务
常客
超额收费
航空公司网页
低成本航空公司
细胞
细胞
细胞
细胞
细胞
-
-
-
细胞
细胞
细胞
细胞
细胞
-
-
-
航空公司
航空公司代码
托运行李
小件寄存处
子女津贴
第一/业务
常客
超额收费
航空公司网页
A.
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
2细胞
细胞
细胞
细胞
细胞
细胞
细胞
5细胞
细胞
细胞
细胞
细胞
$('#dev-table-filter ').keyup( /*same ID used*/
function search(id){
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
id.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
}
$('#dev-table-filter ').keyup(function () {
search($('#dev-table tbody tr '));
});
$('#dev-table-filter ').keyup(
//-------------------^ Add the respective element here