我有一个表搜索，但我想进行反向搜索。<input type="checkbox" checked>在我的 jQuery 代码中，当 a为 false时，如何交换 .hide() -> .show() 和 .show() -> .hide() 。当选中复选框时，撤消所有内容。<input type="text" placeholder="Search..." id="search_field"><input type="checkbox" checked><table id="myTable" border="1"> <thead> <tr class="myHead"> <th>XDFFD</th> <th>DFDDY</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody></table> $('#search_field').on('keyup', function() { var value = $(this).val(); var patt = new RegExp(value, "i"); $('#myTable').find('tr').each(function() { if (!($(this).find('td').text().search(patt) >= 0)) { $(this).not('.myHead').hide(); } if (($(this).find('td').text().search(patt) >= 0)) { $(this).show(); } }); });
2 回答
湖上湖
TA贡献2003条经验 获得超2个赞
您检查复选框是否checked使用is(":checked")这将给出 true 或 false，因此取决于此显示或隐藏 trs。
演示代码：
$('#search_field').on('keyup', function() {
var value = $(this).val();
var patt = new RegExp(value, "i");
var checks = $(".checkbox").is(":checked"); //check if checkbox is checked
console.log(checks)
if (value != "") {
$('#myTable tbody').find('tr').each(function() {
var condition = $(this).find('td').text().search(patt) >= 0
//checked
if (checks) {
//show and hide..
condition ? $(this).show() : $(this).hide()
} else {
condition ? $(this).hide() : $(this).show()
}
});
} else {
$('#myTable tbody > tr').show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" class="checkbox" checked>
<table id="myTable" border="1">
<thead>
<tr class="myHead">
<th>XDFFD</th>
<th>DFDDY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
倚天杖
TA贡献1828条经验 获得超3个赞
这是一个替代版本，使用一个小的 jQuery 扩展来使:contains()大小写不敏感：
// jQuery extension from https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; };
});
$('input').on('input', function() {
$('#myTable tbody tr').each((i,tr)=>$(tr).toggle
( $('td:contains('+$('#search_field').val()+')',tr).length>0 === $(".checkbox").is(":checked") )
)
}).first().focus();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" class="checkbox" checked>
<table id="myTable" border="1">
<thead>
<tr class="myHead">
<th>XDFFD</th>
<th>DFDDY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 one</td>
<td>2 two</td>
</tr>
<tr>
<td>3 Three</td>
<td>4 Four</td>
</tr>
<tr>
<td>5 FIVE</td>
<td>6 SIX</td>
</tr>
</tbody>
</table>
两个布尔值的比较===实际上类似于两个表达式之间的异或条件。结果将是true如果两个 或都不存在表达式
$('td:contains('+$('#search_field').val()+')',tr).length>0和
$(".checkbox").is(":checked")是true。并且这将直接在方法中使用来.toggle()显示或隐藏当前的<tr>.
添加回答
举报
0/150
提交
取消