我的表:
<div id="usertable">
<div class="choicebox">
<div id="choicebox">
<table>
<tr>
<td>
ALL
</td>
<td>
ADMIN
</td>
<td>
MEMBER
</td>
</tr>
</table>
</div>
</div>
<div class="userbox">
<table id="tablelist" >
<tr>
<div class="firstrow">
<div style="margin-left:20px;margin-top:12px;position:absolute;color:white">
User List
</div>
</div>
</tr>
<tr>
<td >
Name
</td>
<td>
User ID
</td>
<td>
Password
</td>
<td >
Organisation
</td>
<td>
Role
</td>
<td>
Status
</td>
<td>
Actions
</td>
</tr>
</table>
</div>
</div>
我试图实现的是,当点击"Admin"时,它只会显示表上的管理员,反之亦然。然而,我已经做了一些研究,我想实现的目标的最佳匹配是使用搜索功能,但这不是我想要实现的。
示例如下:http://www.javascriptkit.com/script/script2/tablefilter.shtml
更新:不带ad和tbody/alternate行颜色
查看这里,DEMOhttp://jsfiddle.net/yeyene/hnJdX/2/
注:我基于您的表格数据,7 columns
和文本,Admin
,Member
。
因此,我检查了第5列和文本,并进行了筛选。如果您有更多的列和不同的文本,请相应地更新代码。
$(document).ready(function () {
alternateRowColor();
$('#admin').on('click', function () {
$('#tablelist tr').each(function () {
$(this).show(0);
if ($.trim($(this).children('td').eq(4).text()) != 'Admin') {
$(this).not('.rowHeader').hide(0);
}
});
alternateRowColor();
});
$('#member').on('click', function () {
$('#tablelist tr').each(function () {
$(this).show(0);
if ($.trim($(this).children('td').eq(4).text()) != 'Member') {
$(this).not('.rowHeader').hide(0);
}
});
alternateRowColor();
});
$('#all').on('click', function () {
$('#tablelist tr').each(function () {
$(this).show(0);
});
alternateRowColor();
});
});
function alternateRowColor() {
var i = 0;
$('#tablelist tr:visible').each(function () {
if (i % 2 === 0) $(this).removeClass('odd').addClass('even');
else $(this).removeClass('even').addClass('odd');
i++;
});
}
我在这里使用了JQuery。
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.choicebox table tr td a').click(function(e){
var href = $(this).attr("href");
if(href === "ALL"){
$('#tablelist tbody tr').show();
return false;
}
$('#tablelist tbody tr').filter(function(index) {
var role = $(this).children()[4].innerHTML;
return role === href;
}
).show();
$('#tablelist tbody tr').filter(function(index) {
var role = $(this).children()[4].innerHTML;
return role !== href;
}
).hide();
return false;
});
});
</script>
</head>
<body>
<div id="usertable">
<div class="choicebox">
<div id="choicebox">
<table>
<tr>
<td><a href="ALL">ALL</a></td>
<td><a href="ADMIN">ADMIN</a></td>
<td><a href="MEMBER">MEMBER</a></td>
</tr>
</table>
</div>
</div>
<div class="userbox">
<table id="tablelist">
<thead>
<tr>
<th>Name</th>
<th>User ID</th>
<th>Password</th>
<th>Organisation</th>
<th>Role</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>nanfeng</td>
<td>1</td>
<td>123</td>
<td>org</td>
<td>MEMBER</td>
<td>OFF</td>
<td>DOING</td>
</tr>
<tr>
<td>beifeng</td>
<td>2</td>
<td>1234</td>
<td>org</td>
<td>ADMIN</td>
<td>OFF</td>
<td>DOING</td>
</tr>
<tr>
<td>dongfeng</td>
<td>3</td>
<td>1235</td>
<td>org</td>
<td>MEMBER</td>
<td>OFF</td>
<td>DOING</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>