jQuery 表格特效：控制单元格折叠、展开代码代码,Js代码库,德仔网

代码语言

代码分类

【Js】 jQuery 表格特效：控制单元格折叠、展开代码

作者:松子 / 发布于2016/4/26/ 679

<!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>
<title>jQuery table</title>
<script src="/uploads/common/js/jquery-1.3.2.js"></script>
<script>
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","点击这里展开/关闭")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
//	默认展开
//$('tr[@class^=child-]').hide().children('td');
});
</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>

试试其它关键字

同语言下

可能有用的

松子贡献的其它代码(11)