父子表格

父子表格 详细参见http://www.360ui.net

步骤1：引入父子表脚本

<!--树形表格start--> <script type="text/javascript" src="<%=path%>/libs//js/table/treeTable.js"></script> <!--树形表格end-->

步骤2：构建父子表

<table class="detailTable" useColor="false" useHover="false" useClick="false"> <tr> <th width="30">操作</th><th width="100">姓名</th><th width="100">性别</th><th>备注</th> </tr> <tr> <td><span class="img_add2 hand" title="点击展开"></span></td><td>张小三</td><td>男</td><td>备注文字</td> </tr> <tr> <td></td> <td colspan="3"> <table class="tableStyle"> <tr> <th>日期</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th> </tr> <tr> <td>2010-9-1</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-2</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-3</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-4</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-5</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> </table> </td> </tr> <tr> <td><span class="img_add2 hand" title="点击展开"></span></td><td>张小三</td><td>男</td><td>备注文字</td> </tr> <tr> <td></td> <td colspan="3"> <table class="tableStyle"> <tr> <th>日期</th><th>栏目1</th><th>栏目2</th><th>栏目3</th><th>栏目4</th> </tr> <tr> <td>2010-9-1</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-2</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-3</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-4</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> <tr> <td>2010-9-5</td><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td> </tr> </table> </td> </tr> </table>

代码解读：

Ø  这里table设置class="detailTable"让表格拥有父子表功能，虽然class为detailTable，但仍然保留tableStyle所具有的特性，例如这里设置的useColor、 useHover、 useClick参数；

Ø  展开一行后，之前展开的自动收缩；

Ø  点击按钮进行展开和收缩