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扩展自写的 UI导航
Jan 13 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
React.js入门学习第一篇
Mar 30 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
php文件操作实例代码
2012/05/10 PHP
php引用传值实例详解学习
2013/11/06 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
校长岗位职责
2013/11/26 职场文书
社区国庆节活动方案
2014/02/05 职场文书
学生会招新策划书
2014/02/14 职场文书
医师定期考核实施方案
2014/05/07 职场文书
个人投资合作协议书
2014/10/12 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers