【发布时间】：2020-12-13 10:23:42
【问题描述】：
我希望使用 BOTH 可点击按钮“和”输入搜索来过滤此表。我有一个按钮组，其中每个按钮都有一个 onclick 事件来过滤行，搜索使用 keyup 函数过滤行。每个人都单独工作，但我希望他们一起工作。
1.点击一个按钮（行过滤）
2.添加文本搜索（再次过滤可见行）
反之亦然，或者只是第 1 步或第 2 步
小提琴 http://jsfiddle.net/rbla/Lh3kpxg2/29/
var $rowsss = $('#table tr:visible');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rowsss.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
$("#all").click(function() {
var rows = $("#table").find("tr").show();
});
$("#green").click(function() {
var rows = $("#table").find("tr").hide();
rows.filter(":contains('Green')").show();
});
$("#orange").click(function() {
var rows = $("#table").find("tr").hide();
rows.filter(":contains('Orange')").show();
});
$("#lemon").click(function() {
var rows = $("#table").find("tr").hide();
rows.filter(":contains('Lemon')").show();
});body {
padding: 20px;
}
input {
margin-bottom: 5px;
padding: 2px 3px;
width: 209px;
margin-top: 5px;
}
td {
padding: 4px;
border: 1px #CCC solid;
width: 100px;
}
.buttons-wrapper {
clear: both;
display: inline-block;
box-sizing: border-box;
margin: 0 1%;
}
.my-radio-button {
position: absolute;
left: -9999em;
top: -9999em;
}
.my-radio-button+label {
float: left;
padding: .5em 1em;
cursor: pointer;
border: 1px solid #28608f;
margin-right: -1px;
color: #fff;
/* background-color: #428bca; */
background-color: blue;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
/* text-transform: uppercase; */
}
.my-radio-button+label:first-of-type {
border-radius: .7em 0 0 .7em;
}
.my-radio-button+label:last-of-type {
border-radius: 0 .7em .7em 0;
}
.my-radio-button:checked+label {
/* background-color: #3277b3; */
background-color: #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons-wrapper">
<input type="radio" class="my-radio-button" name="radioButtonTest" value="1" id="all" checked />
<label for="all">All</label>
<input type="radio" class="my-radio-button" name="radioButtonTest" value="2" id="green" />
<label for="green">Green</label>
<input type="radio" class="my-radio-button" name="radioButtonTest" value="3" id="orange" />
<label for="orange">Orange</label>
<input type="radio" class="my-radio-button" name="radioButtonTest" value="4" id="lemon" />
<label for="lemon">Lemon</label>
</div><br clear="all">
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Apple</td>
<td>Blue</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
<tr>
<td>Lemon</td>
<td>Black</td>
</tr>
<tr>
<td>Apple</td>
<td>Blue</td>
</tr>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
<tr>
<td>Lemon</td>
<td>Black</td>
</tr>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
<tr>
<td>Lemon</td>
<td>Black</td>
</tr>
</table>【问题讨论】：
标签： javascript html jquery filtering