问题描述
查看:
<th>
<p>
Nr account: @Html.TextBox("Account")
<input type="button" id="search" value="Search" />
</p>
<p>
Nr invoice: @Html.TextBox("Invoice")
<input type="button" id="search" value="Search" />
</p>
</th>
jQuery:
$('#search').click(function () {
var value = $("#Account,#Invoice").val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
通常来说,当我单击“搜索”时,表格将按第一个搜索框-“帐户”的值进行过滤。我希望表格被两个搜索框的值过滤,哪里出了错?
解决方法
您需要使用class
而不是id
选择器,并且单击按钮时分别获取两个值,并且只需在each
循环内比较两个值即可。
演示代码 :
$('.search').click(function() {
//get both values
var value = $("#Account").val().toLowerCase();
var value2 = $("#Invoice").val().toLowerCase();
$("#myTable tbody tr").filter(function() {
var texts =$(this).text().toLowerCase()
//check both condition
$(this).toggle(texts.indexOf(value) > -1 && (texts.indexOf(value2) > -1))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>
<p>
Nr account<input type="text" id="Account">
<input type="button" class="search" value="Search" />
</p>
<p>
Nr invoice:<input type="text" id="Invoice">
<input type="button" class="search" value="Search" />
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xavier</td>
<td>41</td>
</tr>
<tr>
<td>Muska</td>
<td>38</td>
</tr>
<tr>
<td>Swati</td>
<td>45</td>
</tr>
</tbody>
</table>