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>

赞 (0)

相关推荐

  • JS仿QQ好友列表展开、收缩功能(第一篇)

    JS仿QQ好友列表展开、收缩功能(第一篇)

    效果图如下所示: html: <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <

  • js实现div层缓慢收缩与展开的方法

    本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu

  • JS+CSS实现DIV层的展开、收缩效果

    JS+CSS实现DIV层的展开、收缩效果

    本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,

  • JS右下角广告窗口代码(可收缩、展开及关闭)

    JS右下角广告窗口代码(可收缩、展开及关闭)

    本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • JS实现固定在右下角可展开收缩DIV层的方法

    本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

    复制代码 代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&

  • JS仿QQ好友列表展开、收缩功能(第二篇)

    JS仿QQ好友列表展开、收缩功能(第二篇)

    在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl

  • 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 = documen

  • javascript使用substring实现的展开与收缩文字功能示例

    javascript使用substring实现的展开与收缩文字功能示例

    本文实例讲述了javascript使用substring实现的展开与收缩文字功能.分享给大家供大家参考,具体如下: 效果如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 展开和收缩</title> <style> p { margin: 0 auto; widt

  • jquery简单实现网页层的展开与收缩效果

    jquery简单实现网页层的展开与收缩效果

    本文实例讲述了jquery简单实现网页层的展开与收缩效果.分享给大家供大家参考.具体如下: 这里演示了jquery网页层展开.层收缩代码,带缓冲动画效果,点击指定的文字或按钮,可展开指定层,再次单击会收起层,类似效果网上已见到许多,请根据自己的需要修改代码,别忘了引入最新的jQuery插件哦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

  • DataGridView展开与收缩功能实现

    很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在DataGridView中如何实现这个功能. 首先,创建示例数据: 示例数据SQL create table Department ( ID int identity(1,1) not null, DName varchar(20) null, DparentId int null, Dtelphone

  • JavaScript设置首页和收藏页面的小例子

    复制代码 代码如下: <html>    <head>       <title>JavaScript设置首页和收藏页面(兼容IE和火狐)</title>       <script>       //url:要收藏的链接:title:收藏项的名称       function AddFavorite(url,title)       {          //如果url或者title为空,默认为当前页面url和title.          i

  • JavaScript设置名字输入不合法的实现方法

    html代码: <tr> <th>输入名称:</th> <td><input type='text' class='normal' name='name' pattern='required' alt='名称'id="checkText" onblur="checkName()" /><label>* 特价活动名称</label></td> </tr> 在表单

  • PHP如何读取由JavaScript设置的Cookie

    cookie在开发中使用的非常多,但如果是使用JavaScript设置cookie然后使用PHP读取出来如何实现呢?即PHP与JavaScript下Cookie的交互使用是否可行呢? <?php // 读取JavaScript设置的cookie header("Content-type: text/html; charset=utf-8"); if(isset($_COOKIE["param"])){ echo $_COOKIE["param&quo

  • javascript设置页面背景色及背景图片的方法

    本文实例讲述了javascript设置页面背景色及背景图片的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus

随机推荐