Jquery显示/隐藏表行
Jquery显示/隐藏表行
提问于 2011-07-14 06:18:32
我希望能够使用jquery显示/隐藏表中的行。理想情况下，我希望在表格上方有按钮，用来对表格进行排序。
即显示id为:black的行显示所有行
我找遍了也找不到解决办法。有人知道我如何用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>
回答 2
Stack Overflow用户
发布于 2014-04-05 13:22:01
过滤器功能对我来说根本不起作用；也许最新版本的jquery不能像上面代码中使用的版本那样工作。不管怎样，我使用了：
var black = $('.black');
var white = $('.white');选择器将找到每个被归类为黑色或白色的元素。按钮功能保持如上所述：
$('#showBlackButton').click(function() {
black.show();
white.hide();
});
$('#showWhiteButton').click(function() {
white.show();
black.hide();
});Stack Overflow用户
发布于 2011-07-14 06:23:03
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6686377
复制相关文章
相似问题