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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
javascript的内存管理详解
Aug 07 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
angular简介和其特点介绍
Jan 29 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
微信小程序自定义联系人弹窗
May 26 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
PHP查询网站的PR值
2013/10/30 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python解释执行原理分析
2014/08/22 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
红旗渠导游词
2015/02/09 职场文书
世界地球日活动总结
2015/02/09 职场文书