您的位置：首页 > Web前端 > JQuery

jquery表格内容筛选

2013-04-07 15:51 267 查看


希望大家给个赞哦


// jquery表格内容筛选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../css/jquery-1.6.2.js"></script>

<script>

$(function(){

$('tr.parent').click(function(){

$(this).toggleClass("selected").siblings('.child_'+this.id).toggle();

});

});

</script>

<style>

.selected{background:red};

</style>

<title>Untitled Document</title>

</head>

<body>

<table>

<thead>

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

</thead>

<tbody>

<tr class="parent" id="row_01">

<td colspan="2">人力部</td>

</tr>

<tr class="child_row_01">

<td >陈娇</td>

<td>20</td>

</tr>

<tr class="child_row_01">

<td >陈娇</td>

<td >20</td>

</tr>

<tr class="child_row_01">

<td >陈娇</td>

<td >20</td>

</tr>

<tr class="parent" id="row_02">

<td colspan="2">技术部</td>

</tr>

<tr class="child_row_02">

<td >陈娇</td>

<td >20</td>

</tr>

<tr class="child_row_02">

<td >陈娇</td>

<td >20</td>

</tr>

<tr class="child_row_02">

<td >陈娇</td>

<td >20</td>

</tr>

</tbody>

</table>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航