表格伸缩

最新推荐文章于 2022-05-23 15:01:09 发布

烧了回忆取暖

最新推荐文章于 2022-05-23 15:01:09 发布

阅读量518

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/kanuoyuan/article/details/37879701

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格伸缩</title>
<script type="text/javascript" src="class library/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
	$('tr.parent')
	.css('cursor','pointer') //cursor光标
	.attr('title','点击这里展开/关闭') //attr 属性
	.click(function(){
		$(this).siblings('.child-'+this.id).toggle();
	}); //siblings兄弟姐妹
});
</script>
<style>
table.detail, table.detail td, table.detail th {
	border:1px solid #000 ;
}
</style>

</head>

<body>
<table id="detail_table" class="detail" > 
	<col style="width:40px;">
	<col style="width:80px;">
	<col style="width:150px;">
	<col style="width:40px;">
<thead>
	<tr>
		<th>ID</th>
		<th colspan="2">Name</th>
		<th>Total</th>
	</tr>
</thead>
<tbody>
	<tr class="parent" id="row123">
		<td>123</td>
		<td colspan="2">关闭1</td>
		<td>100</td>
	</tr>
	<tr class="child-row123">
		<td> </td>
		<td>2007-01-02</td>
		<td>A short description</td>
		<td>15</td>
	</tr>
	<tr class="child-row123">
		<td> </td>
		<td>2007-02-03</td>
		<td>Another description</td>
		<td>45</td>
	</tr>
	<tr class="child-row123">
		<td> </td>
		<td>2007-03-04</td>
		<td>More Stuff</td>
		<td>40</td>
	</tr>

	<tr class="parent" id="row456">
		<td>456</td>
		<td colspan="2">关闭2</td>
		<td>50</td>
	</tr>
	<tr class="child-row456">
		<td> </td>
		<td>2007-01-02</td>
		<td>A short description</td>
		<td>10</td>
	</tr>
	<tr class="child-row456">
		<td> </td>
		<td>2007-02-03</td>
		<td>Another description</td>
		<td>20</td>
	</tr>
	<tr class="child-row456">
		<td> </td>
		<td>2007-03-04</td>
		<td>More Stuff</td>
		<td>20</td>
	</tr>

	<tr class="parent" id="row789">
		<td>789</td>
		<td colspan="2">关闭3</td>
		<td>75</td>
	</tr>
	<tr class="child-row789">
		<td> </td>
		<td>2007-01-02</td>
		<td>A short description</td>
		<td>33</td>
	</tr>
	<tr class="child-row789">
		<td> </td>
		<td>2007-02-03</td>
		<td>Another description</td>
		<td>22</td>
	</tr>
	<tr class="child-row789">
		<td> </td>
		<td>2007-03-04</td>
		<td>More Stuff</td>
		<td>20</td>
	</tr>
</tbody>
</table>
</body>
</html>