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 innerHTML使用分析
Dec 03 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
JS实现简单拖拽效果
Jun 21 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 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 高手之路(二)
2006/10/09 PHP
php入门小知识
2008/03/24 PHP
js 内存释放问题
2010/04/25 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python常见异常分类与处理方法
2017/06/04 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
PyQt实现计数器的方法示例
2021/01/18 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
鼓舞士气的口号
2014/06/16 职场文书
校运动会广播稿300字
2014/10/07 职场文书
离婚答辩状范文
2015/05/22 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书