<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.hidden
{
display: none;
}
.button
{
cursor: hand;
}
</style>
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').toggle(function() {
$('#tab' + this.id).removeClass('hidden');
}, function() {
$('#tab' + this.id).addClass('hidden');
});
$('tr.parent').click(function() {
$(this).siblings(".child_" + this.id).toggle();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
表格行的显示与隐藏</h3>
<table>
<tr class="button" id="tr_1">
<td>
第一行
</td>
</tr>
<tr id="tabtr_1" class="hidden">
<td>
香港国际电影节开幕汤唯成唯一女主角 田亮何润东被曝夜店遭袭 与敬酒人打斗 周杰伦MV女模买毒被抓 承认吸毒卖淫 舞王张佑赫做客 自曝最爱功夫巨星
</td>
</tr>
<tr class="button" id="tr_2">
<td>
第二行
</td>
</tr>
<tr id="tabtr_2" class="hidden">
<td>
香港国际电影节开幕汤唯成唯一女主角 田亮何润东被曝夜店遭袭 与敬酒人打斗 周杰伦MV女模买毒被抓 承认吸毒卖淫 舞王张佑赫做客 自曝最爱功夫巨星
</td>
</tr>
</table>
<table>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
681
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
