我希望能够使用jquery显示/隐藏表中的行。理想情况下,我希望在表格上方设置按钮,以便对表格进行排序。
即[显示ID为黑色的行] [显示ID为白色的行] [显示所有行]
我已经搜遍了所有但无法找到解决方案。任何人都知道我如何使用jquery做到这一点,并使其跨浏览器兼容?
谢谢(以下代码)
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla">
<caption>bla bla bla</caption>
<thead>
<tr id="black">
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
</tr>
</thead>
<tbody>
<tr id="white">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr id="black">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
答案 0 :(得分:34)
将黑白ID更改为类(重复ID无效),添加2个带有正确ID的按钮,然后执行以下操作:
var rows = $('table.someclass tr');
$('#showBlackButton').click(function() {
var black = rows.filter('.black').show();
rows.not( black ).hide();
});
$('#showWhiteButton').click(function() {
var white = rows.filter('.white').show();
rows.not( white ).hide();
});
$('#showAll').click(function() {
rows.show();
});
<button id="showBlackButton">show black</button>
<button id="showWhiteButton">show white</button>
<button id="showAll">show all</button>
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla">
<caption>bla bla bla</caption>
<thead>
<tr class="black">
...
</tr>
</thead>
<tbody>
<tr class="white">
...
</tr>
<tr class="black">
...
</tr>
</tbody>
</table>
它使用filter()
[docs]方法过滤black
或white
类的行(取决于按钮)。
然后,它使用not()
[docs]方法执行相反的过滤,排除先前找到的black
或white
行。
编辑:您也可以将选择器传递给.not()
,而不是之前找到的设置。它的表现可能更好:
rows.not( `.black` ).hide();
// ...
rows.not( `.white` ).hide();
...或者更好的是,从一开始就保持一组缓存:
var rows = $('table.someclass tr');
var black = rows.filter('.black');
var white = rows.filter('.white');
$('#showBlackButton').click(function() {
black.show();
white.hide();
});
$('#showWhiteButton').click(function() {
white.show();
black.hide();
});
答案 1 :(得分:3)
过滤功能对我来说根本不起作用;也许最新版本的jquery不会像上面代码中使用的那样执行。而不管;我用过:
var black = $('.black');
var white = $('.white');
选择器将找到归类为黑色或白色的所有元素。 按钮功能保持如上所述:
$('#showBlackButton').click(function() {
black.show();
white.hide();
});
$('#showWhiteButton').click(function() {
white.show();
black.hide();
});
答案 2 :(得分:1)
http://sandbox.phpcode.eu/g/corrected-b5fe953c76d4b82f7e63f1cef1bc506e.php
<span id="black_only">Show only black</span><br>
<span id="white_only">Show only white</span><br>
<span id="all">Show all of them</span>
<style>
.black{background-color:black;}
#white{background-color:white;}
</style>
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla">
<caption>bla bla bla</caption>
<thead>
<tr class="black">
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
<th>Header Text</th>
</tr>
</thead>
<tbody>
<tr id="white">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr class="black" style="background-color:black;">
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
<script>
$(function(){
$("#black_only").click(function(){
$("#white").hide();
$(".black").show();
});
$("#white_only").click(function(){
$(".black").hide();
$("#white").show();
});
$("#all").click(function(){
$("#white").show();
$(".black").show();
});
});
</script>