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 静态页面实现随机显示广告的办法
Nov 17 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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生成静态文件的多种方法分享
2012/07/17 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
angular.element方法汇总
2015/01/07 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Flask之请求钩子的实现
2018/12/23 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
python wsgiref源码解析
2021/02/06 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
四年级下册教学反思
2014/02/01 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
学校安全管理制度
2015/08/06 职场文书