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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php使用google地图应用实例
2014/12/31 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
jQuery cdn使用介绍
2013/05/08 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python 列表的清空方式
2020/01/13 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
详解Django配置JWT认证方式
2020/05/09 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
生产操作工岗位职责
2014/09/16 职场文书
高考升学宴答谢词
2015/01/20 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL