我在使用 style.display 的語法出了點小問題,
執行 style.display='block' 時會顯示出來,
執行 style.display='none' 時也會正確的隱藏,但是問題來了,
雖然隱藏了但是原本呈現的地方不會縮回去留下了一段空白,
所以在重複執行 style.display='block' 及 style.display='none',
空白就會越拉越大,畫面就越擠越下面了。
這在 IE 執行是正常的,Firefox 卻有以上的問題,
請問我有哪裡沒注意到呢...@@
範例一︰
代碼:
<script language="javascript">
<!--
function _CS_Show_tr( idx )
{
if (document.getElementById(idx).style.display=='block'){
document.getElementById(idx).style.display='none';
}else{
document.getElementById(idx).style.display='block';
}
}
//-->
</script>
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="meatTxt">
<form name="form1" method="post" action="" onSubmit="return _CS_checkAdd(this);" enctype="multipart/form-data">
<tr>
<td valign="top" bgcolor="#EBEBEB"> 圖示︰</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="meatTxt">
<tr>
<td> <a onClick="_CS_Show_tr( 'dy_tr' )" style="cursor:hand"><img id="iconpic" src="001/001.gif"> 選擇圖示</a></td>
</tr>
<tr id="dy_tr" style="display:none">
<td>
<hr color="#EBEBEB" size="1">
<input name="icon_img" type="radio" value="001/001.gif" onClick="_CS_Show_tr( 'dy_tr' );"> <img src="001/001.gif">
<input name="icon_img" type="radio" value="001/001.gif" onClick="_CS_Show_tr( 'dy_tr' );"> <img src="002/002.gif">
<input name="icon_img" type="radio" value="001/001.gif" onClick="_CS_Show_tr( 'dy_tr' );"> <img src="003/003.gif">
</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#EBEBEB"> 內容︰</td>
<td>
<textarea name="dia_desc" style="width:40em;" rows="20" class="FormTxt"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" type="submit" class="FormTxt" value="確定送出">
<input name="myAct" type="hidden" id="myAct" value="COMMAND_ADD"></td>
</tr>
</form>
</table>
下面這個範例狀況更嚴重,整個 table 欄位跑的亂七八糟@@
範例二︰
代碼:
<script language="javascript">
<!--
function _CS_type( _this )
{
document.all('basis_tr').style.display='block';
document.all('com_tr').style.display='none';
document.all('mem_tr').style.display='none';
document.form1.cal_ord_basis[0].checked = false;
document.form1.cal_ord_basis[0].disabled = false;
document.form1.cal_ord_basis[1].checked = false;
document.form1.cal_ord_basis[1].disabled = false;
if(_this.value == 1){
document.all('mem_tr').style.display='block';
document.form1.cal_ord_basis[0].checked = true;
document.form1.cal_ord_basis[1].disabled = true;
}else if(_this.value == 2){
document.all('mem_tr').style.display='block';
document.form1.cal_ord_basis[0].checked = true;
document.form1.cal_ord_basis[1].disabled = true;
}else if(_this.value == 3){
}else if(_this.value == 4){
document.all('mem_tr').style.display='block';
document.form1.cal_ord_basis[0].checked = true;
document.form1.cal_ord_basis[1].disabled = true;
}else if(_this.value == 5){
}
}
function _CS_basis( _this )
{
document.all('com_tr').style.display='none';
document.all('mem_tr').style.display='none';
if(_this.value == 1){
//會員
document.all('mem_tr').style.display='block';
}else if(_this.value == 2){
//公司
document.all('com_tr').style.display='block';
}
}
//-->
</script>
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="meatTxt">
<form name="form1" method="post" action="" onSubmit="return _CS_checkAdd(this);" enctype="multipart/form-data">
<tr>
<td bgcolor="#EBEBEB" width="80> <font color="#FF0000">*</font> 標題︰</td>
<td><input name="cal_ord_title" type="text" id="cal_ord_title" style="width:20em;" class="FormTxt" /></td>
</tr>
<tr>
<td bgcolor="#EBEBEB"> <font color="#FF0000">*</font> 類別項目︰</td>
<td>
<input name="cal_ord_type" type="radio" value="1" onClick="_CS_type( this );"> 日記
<input name="cal_ord_type" type="radio" value="2" onClick="_CS_type( this );"> 相簿
<input name="cal_ord_type" type="radio" value="3" onClick="_CS_type( this );"> 專欄<br>
<input name="cal_ord_type" type="radio" value="4" onClick="_CS_type( this );"> 討論區
<input name="cal_ord_type" type="radio" value="5" onClick="_CS_type( this );"> 行事曆<br> </td>
</tr>
<tr id="basis_tr" style="display:none">
<td bgcolor="#EBEBEB"> <font color="#FF0000">*</font> 依據︰</td>
<td>
<input name="cal_ord_basis" type="radio" value="1" onClick="_CS_basis( this );"> 會員
<input name="cal_ord_basis" type="radio" value="2" onClick="_CS_basis( this );"> 公司 </td>
</tr>
<tr id="mem_tr" style="display:none">
<td bgcolor="#EBEBEB"> <font color="#FF0000">*</font> 選擇會員︰</td>
<td><input name="mem_name" type="text" disabled class="FormTxt" id="mem_name" style="width:15em;" readonly="true" /></td>
</tr>
<tr id="com_tr" style="display:none">
<td bgcolor="#EBEBEB"> <font color="#FF0000">*</font> 選擇公司︰</td>
<td><input name="com_name" type="text" disabled class="FormTxt" id="com_name" style="width:15em;" readonly="true" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" type="submit" class="FormTxt" value="確定送出">
<input name="myAct" type="hidden" id="myAct" value="COMMAND_ADD"></td>
</tr>
</form>
</table>