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 进度条 实现代码
Jul 30 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
node内置调试方法总结
Feb 22 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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制作静态网站的模板框架(三)
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
python列表与元组详解实例
2013/11/01 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python内置函数dir详解
2015/04/14 Python
python中循环语句while用法实例
2015/05/16 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python素数筛选法浅析
2018/03/19 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python 切换root 执行命令的方法
2019/01/19 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
Python面试题集
2012/03/08 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
行政专员岗位职责
2014/01/02 职场文书
报告会主持词
2014/04/02 职场文书
服装设计师求职信
2014/06/04 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
nginx 配置缓存
2022/05/11 Servers