我有一张包含带文字的td的表格。我希望能够根据复选框值过滤每一行。例如,如果我只选择一个复选框,它将查看并过滤掉不包含复选框值的行。如果我选中两个复选框,它将过滤并仅显示包含复选框的两个值的行。我可以让它部分工作,但如果存在复选框值,它将显示该行,无论是否选择了第二个复选框。如果选择了其他复选框,我怎样才能进一步过滤?
这是我到目前为止的代码。
jQuery('document').ready(function(){
var $ = jQuery
$(":checkbox").click(function() {
var showAll = true;
$('tr').not('.first').hide();
var checkedValues = $(":checkbox:checked").map(function() {
return this.value;
}).get();
$("tbody tr").hide();
for (var i = 0; i < checkedValues.length; i++) {
showAll = false;
$("td:contains('" + checkedValues[i] + "')").parent("tr").show();
}
if(showAll){
$('tr').show();
}
});
});
答案 0 :(得分:1)
假设您只需要包含已选中复选框值全部的行。
试试这个:
$(":checkbox").click(function() {
var checkedValues = $(":checkbox:checked").map(function() {
return this.value;
}).get();
$("tbody tr")
.hide()
.filter(function() {
var
$tr = $(this),
$tds = $.map(checkedValues, function(v) {
return $tr.find('td:contains(' + v + ')').length > 0 ? v : null;
});
return $tds.length == checkedValues.length;
}).show();
if (checkedValues.length == 0) {
$('tr').show();
}
});
&#13;
#searchTable {
border-collapse: collapse;
}
#searchTable td {
border: 1px solid #333;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="buh" value="buh">
<label for="buh">buh</label>
<input type="checkbox" id="dum" value="dum">
<label for="dum">dum</label>
<input type="checkbox" id="tss" value="tss">
<label for="tss">tss</label>
<table id="searchTable">
<thead>
<tr class="first">
<td>probably</td>
<td>are</td>
<td>headers</td>
</tr>
</thead>
<tbody>
<tr>
<td>buh</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>dum</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>tss</td>
</tr>
<tr>
<td>buh</td>
<td>dum</td>
<td></td>
</tr>
<tr>
<td></td>
<td>dum</td>
<td>tss</td>
</tr>
<tr>
<td>buh</td>
<td></td>
<td>tss</td>
</tr>
</tbody>
</table>
&#13;