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 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
八种Vue组件间通讯方式合集(推荐)
Aug 18 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
Backbone.js中的集合详解
2015/01/14 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
js编写简单的聊天室功能
2017/08/17 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
详解python和matlab的优势与区别
2019/06/28 Python
python常用数据重复项处理方法
2019/11/22 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
explicit和implicit的含义
2012/11/15 面试题
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
颐和园的导游词
2015/01/30 职场文书
语文教师求职信范文
2015/03/20 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle