JavaScript設(shè)置FieldSet展開(kāi)與收縮

更新時(shí)間：2009年05月15日 00:02:17 作者：

JavaScript設(shè)置FieldSet展開(kāi)與收縮實(shí)現(xiàn)代碼。

JavaScript方法代碼：

// 設(shè)置FieldSet高度方法，支持IE瀏覽器、Firefox 
// 參數(shù)1：pTableID，F(xiàn)ieldSet內(nèi)部div或table的id 
// 參數(shù)2：pFieldSetID，F(xiàn)ieldSet的ID 
// 參數(shù)3：pImageID，圖片的ID，展開(kāi)或收縮后更新圖片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代碼：

復(fù)制代碼代碼如下:

<fieldset id="fset_ShipInportInfo"> 
<legend> 
<img alt="展開(kāi)或收縮" id="img_ShipInportInfo" src="images/constringency.png" src="images/constringency.png" onclick="FieldSetVisual('t_ShipInportInfo','fset_ShipInportInfo','img_ShipInportInfo')" />車(chē)船到廠記錄<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> 
車(chē)船名：<span style="font-weight: bold;" style="font-weight: bold;">車(chē)皮 等 共50節(jié)</span> 
</td> 
<td> 
車(chē)船到達(dá)時(shí)間：2009年5月9日 17時(shí) 
</td> 
<td> 
來(lái)煤方式：<span style="font-weight: bold;" style="font-weight: bold;">鐵路</span> 
</td> 
<td> 
煤炭來(lái)源：<span style="font-weight: bold;" style="font-weight: bold;">淮南</span> 
</td> 
</tr> 
</tr> 
</table> 
</fieldset>

您可能感興趣的文章:

相關(guān)文章

JS回調(diào)函數(shù)深入理解
這篇文章主要介紹了JS回調(diào)函數(shù),結(jié)合實(shí)例形式深入分析了js回調(diào)函數(shù)的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-10-10
JavaScript生成隨機(jī)字符串的方法
這篇文章主要介紹了JavaScript生成隨機(jī)字符串的方法,涉及javascript中random的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
ECharts儀表盤(pán)實(shí)例代碼(附源碼下載)
大家在汽車(chē)駕駛艙里一眼就可以看到儀表盤(pán)，使用使用Echarts制作的儀表盤(pán)可以輕松展示用戶(hù)的數(shù)據(jù)，清晰的看出某個(gè)指標(biāo)值所在的范圍，儀表盤(pán)形式的報(bào)表應(yīng)用在各種統(tǒng)計(jì)系統(tǒng)中，本文結(jié)合實(shí)例講解儀表盤(pán)在銷(xiāo)售任務(wù)完成率的統(tǒng)計(jì)應(yīng)用
2016-02-02
使用正則表達(dá)式的格式化與高亮顯示json字符串
這篇文章主要介紹了使用正則表達(dá)式的格式化與高亮顯示json字符串的方法，非常的簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2014-12-12
重新理解JavaScript的六種繼承方式
通過(guò)本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
關(guān)于js中e.preventDefault()的具體使用
本文主要介紹了關(guān)于js中e.preventDefault()的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
解決js圖片加載時(shí)出現(xiàn)404的問(wèn)題
這篇文章主要為大家詳細(xì)介紹了解決js圖片加載時(shí)出現(xiàn)404問(wèn)題的方法，具有一定的參考價(jià)值，這方面有困惑的朋友可以參考一下
2015-11-11
微信小程序?qū)崿F(xiàn)上傳多個(gè)文件超過(guò)10個(gè)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳多個(gè)文件，超過(guò)10個(gè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
深入探討javascript函數(shù)式編程
在函數(shù)式編程中，函數(shù)被看做是“一等公民”。JavaScript可以通過(guò)巧妙地函數(shù)組合來(lái)構(gòu)建抽象，通過(guò)內(nèi)嵌函數(shù)的方式，在軟件開(kāi)發(fā)的過(guò)程中，我們可以把更多的精力放在“函數(shù)要做什么”上，而不用太關(guān)心“函數(shù)如何做”的問(wèn)題。
2015-10-10
JS調(diào)用安卓手機(jī)攝像頭掃描二維碼
這篇文章主要為大家詳細(xì)介紹了JS調(diào)用安卓手機(jī)攝像頭掃描二維碼，并用JS解析二維碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10