管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript设置FieldSet展开与收缩

JavaScript方法代码：

　　

复制代码 代码如下:

　　// 设置FieldSet高度方法，支持IE浏览器、Firefox

　　// 参数1：pTableID，FieldSet内部div或table的id

　　// 参数2：pFieldSetID，FieldSet的ID

　　// 参数3：pImageID，图片的ID，展开或收缩后更新图片SRC

　　function FieldSetVisual( pTableID, pFieldSetID, pImageID )

　　{

　　var objTable = document.getElementById( pTableID ) ;

　　var objFieldSet = document.getElementById( pFieldSetID) ;

　　var objImage = document.getElementById( pImageID) ;

　　if( objTable.style.visibility == 'visible' )

　　{

　　objTable.style.visibility = 'hidden' ;

　　objFieldSet.style.height = "22px" ;

　　objImage.src="images/expand.png" ;

　　}

　　else

　　{

　　objTable.style.visibility = 'visible';

　　var heightFieldSet = parseInt( objFieldSet.style.height.substr(0,objFieldSet.style.height.length-2)) ;

　　var heightTable = parseInt( objTable.offsetHeight ) ;

　　objFieldSet.style.height = heightFieldSet + heightTable + "px" ;

　　objImage.src="images/constringency.png" ;

　　}

　　}

　　HTML中FieldSet代码：

　　

复制代码 代码如下:

　　<fieldset id="fset_ShipInportInfo">

　　<legend>

　　<img alt="展开或收缩" id="img_ShipInportInfo" src="images/constringency.png" src="images/constringency.png" onclick="FieldSetVisual('t_ShipInportInfo','fset_ShipInportInfo','img_ShipInportInfo')" />车船到厂记录<span style="color: Red;" style="color: Red;">（已录入/未录入）</span></legend>

　　<table width="100%" border="0" cellpadding="0" cellspacing="0" id="t_ShipInportInfo"

　　style="visibility: visible;" style="visibility: visible;">

　　<tr>

　　<td>

　　车船名：<span style="font-weight: bold;" style="font-weight: bold;">车皮 等 共50节</span>

　　</td>

　　<td>

　　车船到达时间：2009年5月9日 17时

　　</td>

　　<td>

　　来煤方式：<span style="font-weight: bold;" style="font-weight: bold;">铁路</span>

　　</td>

　　<td>

　　煤炭来源：<span style="font-weight: bold;" style="font-weight: bold;">淮南</span>

　　</td>

　　</tr>

　　</tr>

　　</table>

　　</fieldset>

教程首页 更多教程