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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
js实现微博发布小功能
Jan 12 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
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 上传文件的方法(类)
2009/07/30 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php绘制一个矩形的方法
2015/01/24 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
护理专业推荐信
2013/11/07 职场文书
营业经理岗位职责
2013/11/10 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
礼仪培训心得体会
2016/01/22 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL