JavaScript设置FieldSet展开与收缩

160 阅读 0 评论 106 点赞

我是靠谱客的博主潇洒香烟，最近开发中收集的这篇文章主要介绍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>