JavaScript设置FieldSet展开与收缩


Posted in Javascript onMay 15, 2009

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>
Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
childNodes.length与children.length的区别
May 14 #Javascript
DOM下的节点属性和操作小结
May 14 #Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 #Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 #Javascript
JS面向对象、prototype、call()、apply()
May 14 #Javascript
JavaScript Date对象使用总结
May 14 #Javascript
jQuery 技巧大全(新手入门篇)
May 12 #Javascript
You might like
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP中常用的魔术方法
2017/04/28 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python sorted对list和dict排序
2020/06/09 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
校班主任推荐信范文
2013/12/03 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
行政监察建议书
2014/05/19 职场文书
学期个人自我总结
2015/02/13 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL