脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript FieldSet

JavaScript设置FieldSet展开与收缩

 更新时间：2009年05月15日 00:02:17   作者：  
JavaScript设置FieldSet展开与收缩实现代码。
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>
您可能感兴趣的文章:

相关文章

  • JS回调函数深入理解

    JS回调函数深入理解

    这篇文章主要介绍了JS回调函数,结合实例形式深入分析了js回调函数的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-10-10
  • JavaScript生成随机字符串的方法

    JavaScript生成随机字符串的方法

    这篇文章主要介绍了JavaScript生成随机字符串的方法,涉及javascript中random的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • ECharts仪表盘实例代码(附源码下载)

    ECharts仪表盘实例代码(附源码下载)

    大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用
    2016-02-02
  • 使用正则表达式的格式化与高亮显示json字符串

    使用正则表达式的格式化与高亮显示json字符串

    这篇文章主要介绍了使用正则表达式的格式化与高亮显示json字符串的方法，非常的简单实用,需要的朋友可以参考下
    2014-12-12
  • 重新理解JavaScript的六种继承方式

    重新理解JavaScript的六种继承方式

    通过本文带领大家一起重新理解JavaScript的六种继承方式,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • 关于js中e.preventDefault()的具体使用

    关于js中e.preventDefault()的具体使用

    本文主要介绍了关于js中e.preventDefault()的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 解决js图片加载时出现404的问题

    解决js图片加载时出现404的问题

    这篇文章主要为大家详细介绍了解决js图片加载时出现404问题的方法，具有一定的参考价值，这方面有困惑的朋友可以参考一下
    2015-11-11
  • 微信小程序实现上传多个文件 超过10个

    微信小程序实现上传多个文件 超过10个

    这篇文章主要为大家详细介绍了微信小程序实现上传多个文件，超过10个，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 深入探讨javascript函数式编程

    深入探讨javascript函数式编程

    在函数式编程中，函数被看做是“一等公民”。JavaScript可以通过巧妙地函数组合来构建抽象，通过内嵌函数的方式，在软件开发的过程中，我们可以把更多的精力放在“函数要做什么”上，而不用太关心“函数如何做”的问题。
    2015-10-10
  • JS调用安卓手机摄像头扫描二维码

    JS调用安卓手机摄像头扫描二维码

    这篇文章主要为大家详细介绍了JS调用安卓手机摄像头扫描二维码，并用JS解析二维码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10

最新评论