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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 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
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
一些.net面试题
2014/10/06 面试题
什么是岗位职责
2013/11/12 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
演讲稿怎么写
2014/01/07 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2016新年晚会开场白
2015/12/03 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫