父子表格

父子表格 詳細參見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參數；

Ø  展開一行後，以前展開的自動收縮；

Ø  點擊按鈕進行展開和收縮