************************************************************************************************************************************************************************************* DIV實現的表格自動伸張與收縮
**************************************************************************************************************************************************************************************
以下是相關代碼，把下面文件放在同一目錄下運行即可：
//文件 table.html 代碼如下
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta http-equiv="Content-Language" content="zh-cn">
- <!-- no cache headers -->
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <!-- end no cache headers -->
- <SCRIPT LANGUAGE="javascript" SRC="div.js"></SCRIPT>
- </head>
- <body >
- <table width="98%" border="1" align="center" cellpadding="1" cellspacing="1" class="form_table">
- <tr>
- <td>
- <div id="sceneReceptionDispatch"><table width="100%" cellpadding="1" cellspacing="1" border="1" class="form_table">
- <tr class="title">
- <td colspan="4"><div align="left" onClick="javascript:SwitchformDiv('receptionDispatch');" style="cursor: hand"><strong> 表格一信息</strong></div></td>
- </tr>
- </table></div>
- <div id="receptionDispatch"><table width="100%" border="1" align="center" cellpadding="1" cellspacing="1" class="form_table">
- <tr>
- <td width="18%" class=form_label>11</td>
- <td width="32%" class=form_label>11</td>
- <td width="18%" class=form_label >11</td>
- <td width="32%" class=form_label>11</td>
- </tr>
- <tr>
- <td class=form_label>11</td>
- <td class=form_label>11</td>
- <td class=form_label >11</td>
- <td class=form_label>11</td>
- </tr>
- <tr>
- <td class=form_label>11</td>
- <td class=form_label>11</td>
- <td class=form_label >11</td>
- <td class=form_label>11</td>
- </tr>
- <tr>
- <td class=form_label>11</td>
- <td class=form_label>11</td>
- <td class=form_label >11</td>
- <td class=form_label>11</td>
- </tr>
- <tr>
- <td class=form_label>11</td>
- <td class=form_label>11</td>
- <td class=form_label >11</td>
- <td class=form_label>11</td>
- </tr>
- <tr>
- <td class=form_label>11</td>
- <td class=form_label>11</td>
- <td class=form_label >11</td>
- <td class=form_label>11</td>
- </tr></table></div>
- </td>
- </tr>
- <tr><td class="form_content"><a name="a1" id="a1"> </a></td></tr>
- <tr>
- <td >
- <div id="sceneLawCase"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="form_table">
- <tr class="title">
- <td colspan="4"><a href="#a1" target="_self"><div align="left" onClick="javascript:SwitchformDiv('lawCase');" style="cursor: hand"><strong> 表格二本信息</strong></div></a></td>
- </tr>
- </table></div>
- <div id="lawCase"><table width="100%" cellpadding="1" cellspacing="1" class="form_table" border="1">
- <tr>
- <td width="18%" class=form_label>22</td>
- <td width="32%" class=form_label>22</td>
- <td width="18%" class=form_label >22</td>
- <td width="32%" class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr>
- <tr>
- <td class=form_label>22</td>
- <td class=form_label>22</td>
- <td class=form_label >22</td>
- <td class=form_label>22</td>
- </tr></table>
- </div>
- </td>
- </tr>
- <tr><td class="form_content"><a name="a2" id="a2"> </a></td></tr>
- <tr>
- <td>
- <div id="sceneInvestigation"><table width="100%" cellpadding="0" cellspacing="0" border="0" class="form_table">
- <tr class="title">
- <td colspan="4"><a href="#a2" target="_self" ><div align="left" onClick="javascript:SwitchformDiv('investigation');" style="cursor: hand"><strong> 表格三信息</strong></div></a></td>
- </tr>
- </table></div>
- <div id="investigation"><table width="100%" border="1" align="center" cellpadding="1" cellspacing="1" class="form_table">
- <tr>
- <td width="18%" class=form_label>33</td>
- <td width="32%" class=form_label>33</td>
- <td width="18%" class=form_label >33</td>
- <td width="32%" class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- <tr>
- <td class=form_label>33</td>
- <td class=form_label>33</td>
- <td class=form_label >33</td>
- <td class=form_label>33</td>
- </tr>
- </table></div></td>
- </tr>
- </table>
- </body>
- <script type="text/javascript">
- IniformDiv("sceneReceptionDispatch",1,"receptionDispatch",1);
- IniformDiv("sceneLawCase",1,"lawCase",0);
- IniformDiv("sceneInvestigation",1,"investigation",0);
- </script>
- </html>
//文件 div.js 代碼如下
- function IniformDiv(parentDiv,iDisplay,childDiv,iType)
- {
- //先判斷父div是否顯示
- var pDiv_obj = document.getElementById(parentDiv);
- if (iDisplay == 1)
- {
- pDiv_obj.style.visibility = "visible";
- pDiv_obj.style.display = "block";
- }
- if (iDisplay == 0)
- {
- pDiv_obj.style.visibility = "hidden";
- pDiv_obj.style.display = "none";
- }
- //再判斷子div是否顯示
- var Div_obj = document.getElementById(childDiv);
- if(iType == 1)
- {
- Div_obj.style.visibility = "visible";
- Div_obj.style.display = "block";
- }
- if(iType == 0)
- {
- Div_obj.style.visibility = "hidden";
- Div_obj.style.display = "none";
- }
- }
- function showDiv(show_div)
- {
- show_div.style.visibility = "visible";
- show_div.style.display = "block";
- }
- function IniformDiv_Search(el,iType)
- {
- var Div_obj = document.getElementById(el);
- if(iType == 1)
- {
- Div_obj.style.visibility = "visible";
- Div_obj.style.display = "block";
- }
- if(iType == 0)
- {
- Div_obj.style.visibility = "hidden";
- Div_obj.style.display = "none";
- }
- }
- function SwitchformDiv(el)
- {
- var Div_obj = document.getElementById(el);
- if (Div_obj.style.visibility == "hidden")
- {
- Div_obj.style.visibility = "visible";
- Div_obj.style.display = "block";
- return
- }
- if (Div_obj.style.visibility == "visible")
- {
- Div_obj.style.visibility = "hidden";
- Div_obj.style.display = "none";
- return
- }
- }
如發現有問題請與本人聯繫：
QQ：147204701
Email：[email protected]