快捷導(dǎo)航

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

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

JavaScript設(shè)置FieldSet展開與收縮實(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，展開或收縮后更新圖片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="展開或收縮" 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節(jié)</span> 
</td> 
<td> 
車船到達(dá)時(shí)間：2009年5月9日 17時(shí) 
</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>

您可能感興趣的文章:

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