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 相关文章推荐
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
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 类商品秒杀计时实现代码
2010/05/05 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python socket实现简单聊天室
2018/04/01 Python
pandas数值计算与排序方法
2018/04/12 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python生成特定分布数的实例
2019/12/05 Python
python机器学习库xgboost的使用
2020/01/20 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
英语专业推荐信
2013/11/16 职场文书
七年级地理教学反思
2014/01/26 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
企业战略合作意向书
2015/05/08 职场文书
道歉的话语大全
2015/05/12 职场文书
赞助商致辞
2015/07/30 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书