我想对两个表使用相同的搜索过滤器。现在它只适用于一个表
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();
});
这是我的HTML代码，我认为这有助于理解问题
<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>
我非常挣扎于此。请帮助我。帮助我。帮助.thanx
答案 0 :(得分：1)
您使用了相同的@Configuration
public class BatchConfig {
@Autowired
private DataSource primaryDataSource;
@Bean
public TaskConfigurer taskConfigurer() {
return new DefaultTaskConfigurer(primaryDataSource);
}
}
，这就是它仅适用于一个
ID应始终是唯一的
使用不同的ID或ID代替。
Class答案 1 :(得分：1)
您可以创建一个通用函数，并使用该函数传递表的id，如：
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();
}
在您的keyup函数中，您可以将其称为
$('#dev-table-filter ').keyup(function () {
search($('#dev-table tbody tr '));
});
希望它有效：）
答案 2 :(得分：0)
您不能在.keyup使用相同的ID。请在id：
$('#dev-table-filter ').keyup(
//-------------------^ Add the respective element here
答案 3 :(得分：0)
根据我的理解，您在keyup上缺少nav-table个活动，因此它仅适用于一个表格。
您可以尝试这样的事情：
$('#dev-table-filter, #nav-table').keyup(function() {
filter(this);
});
function filter(self) {
var val = '^(?=.*\\b' + $.trim($(self).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$(self).find('tbody tr').show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
}