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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
js实现表格字段排序
Feb 19 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
js如何取消事件冒泡
2013/09/23 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
学习javascript文件加载优化
2016/02/19 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python实现猜拳游戏
2020/03/04 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
学生出入校管理制度
2014/01/16 职场文书
旅游项目开发策划书
2014/01/18 职场文书
中学自我评价
2014/01/31 职场文书
新春文艺演出主持词
2014/03/27 职场文书
小学作文评语大全
2014/04/21 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
nginx安装以及配置的详细过程记录
2021/09/15 Servers
python数字类型和占位符详情
2022/03/13 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android