我有根据所选国家/地区切换省和州的代码(请参见底部的代码)。该代码的功能正常,但浏览器似乎不再识别显示为<TR>
的display:block;
具有两个TD。
如果设置为display:block;
,则不会显示这两个TD,因此它们与国家/地区对齐,它将呈现为只有一个TD,并且同时显示省/州文本和下拉框。我花了几天时间尝试在这里和其他地方找到的不同建议,但仍然找不到能够使渲染正常工作的解决方案。
基于我在这里找到的内容
<div style display="none" > inside a table not working
Hiding table data using <div style="display:none">
以下内容应该可以,但是渲染仍然不正确。
<TR ID="USstate" STYLE="display: none;">
<TD><DIV CLASS="inputlabel">State</DIV></TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD>
</TR>
<tbody ID="USstate" STYLE="display: none;">
<TR><TD><DIV CLASS="inputlabel">State</DIV></TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD>
</TR>
</tbody>
[当我在下面的主要代码中使用class="show"
代替display:block
TR中的id=Default
时,它将按应有的方式渲染,但在showStates中将.style.display='block';
和.style.display='none';
更改为.className='show';
和.className='hide';
在显示和隐藏之间切换的JavaScript破坏了功能。
<script>
.show { display: block; }
.hide { display: none; }
</script>
<tbody ID="Default" CLASS="show">
<TR><TD><DIV CLASS="inputlabel">Province</DIV></TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134" SELECTED>Ontario</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD>
</TR>
</tbody>
希望听到有关为什么渲染不正确的建议。再次,这个问题与功能无关,因为以下代码应能正常工作,而仅与修复错误的渲染有关。
需要任何澄清,请告知
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
.show { display: block; }
.hide { display: none; }
</script>
<script>
function showStates(country)
{ if (country == "242")
{ document.getElementById('NLprov').style.display='block';
document.getElementById('CAprov').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('NoProv').style.display='none';
document.getElementById('Default').style.display='none';
}
else if (country == "101")
{ document.getElementById('NLprov').style.display='none';
document.getElementById('CAprov').style.display='block';
document.getElementById('USstate').style.display='none';
document.getElementById('NoProv').style.display='none';
document.getElementById('Default').style.display='none';
}
else if (country == "102")
{ document.getElementById('NLprov').style.display='none';
document.getElementById('CAprov').style.display='none';
document.getElementById('USstate').style.display='block';
document.getElementById('NoProv').style.display='none';
document.getElementById('Default').style.display='none';
}
else
{ document.getElementById('NLprov').style.display='none';
document.getElementById('CAprov').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('NoProv').style.display='block';
document.getElementById('Default').style.display='none';
}
return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
<TR><TD>
<TABLE>
<TR><TD>Country</TD>
<TD><SELECT NAME="cc_countryid" id="country" onChange="showStates(this.options[this.selectedIndex].value);" STYLE="font-size:12px;">
<OPTION VALUE="101" SELECTED>Canada</OPTION>
<OPTION VALUE="102">United States</OPTION>
<OPTION VALUE="314">Germany</OPTION>
<OPTION VALUE="242">Netherlands</OPTION>
</SELECT></TD>
</TR>
<tbody ID="Default" STYLE="display: block;">
<TR><TD>Province</TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134" SELECTED>Ontario</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD>
</TR>
</tbody>
<tbody ID="NoProv" STYLE="display: none;">
<TR><TD>Prov/State</TD>
<TD><INPUT TYPE="hidden" NAME="cc_provid" VALUE="0"> </TD>
</TR>
</tbody>
<tbody ID="CAprov" STYLE="display: none;">
<TR><TD>Province</TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD>
</TR>
</tbody>
<tbody ID="USstate" STYLE="display: none;">
<TR><TD>State</TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD>
</TR>
</tbody>
<tbody ID="NLprov" STYLE="display: none;">
<TR><TD>Province</TD>
<TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="201">Drenthe</OPTION>
<OPTION VALUE="202">Gelderland</OPTION>
<OPTION VALUE="202">Friesland</OPTION>
</SELECT></TD>
</TR>
</tbody>
</TABLE>
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
使用其他可行的解决方案获得了更实际的响应。
对于同样的问题,请使用style="display: block/none;"
而不是style="visibility: visible/collapse";
,如下代码所示。不要使用hidden
而不是collapse
,否则您将为隐藏的TR获得额外的空白。
在FF,IE和Chrome中经过测试并可以正常工作。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
function showStates(country)
{ if (country == "242")
{ document.getElementById('NLprov').style.visibility='visible';
document.getElementById('CAprov').style.visibility='collapse';
document.getElementById('USstate').style.visibility='collapse';
document.getElementById('NoProv').style.visibility='collapse';
document.getElementById('Default').style.visibility='collapse';
}
else if (country == "101")
{ document.getElementById('NLprov').style.visibility='collapse';
document.getElementById('CAprov').style.visibility='visible';
document.getElementById('USstate').style.visibility='collapse';
document.getElementById('NoProv').style.visibility='collapse';
document.getElementById('Default').style.visibility='collapse';
}
else if (country == "102")
{ document.getElementById('NLprov').style.visibility='collapse';
document.getElementById('CAprov').style.visibility='collapse';
document.getElementById('USstate').style.visibility='visible';
document.getElementById('NoProv').style.visibility='collapse';
document.getElementById('Default').style.visibility='collapse';
}
else
{ document.getElementById('NLprov').style.visibility='collapse';
document.getElementById('CAprov').style.visibility='collapse';
document.getElementById('USstate').style.visibility='collapse';
document.getElementById('NoProv').style.visibility='visible';
document.getElementById('Default').style.visibility='collapse';
}
return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
<TR><TD>
<TABLE>
<TR><TD>Country</TD>
<TD><SELECT NAME="cc_countryid" id="country" onChange="showStates(this.options[this.selectedIndex].value);">
<OPTION VALUE="101" SELECTED>Canada</OPTION>
<OPTION VALUE="102">United States</OPTION>
<OPTION VALUE="314">Germany</OPTION>
<OPTION VALUE="242">Netherlands</OPTION>
</SELECT></TD>
</TR>
<TR ID="Default" STYLE="visibility: visible;">
<TD>Province</TD>
<TD><SELECT NAME="cc_provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134" SELECTED>Ontario</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD>
</TR>
<TR ID="NoProv" STYLE="visibility: collapse;">
<TD>Prov/State</TD>
<TD><INPUT TYPE="hidden" NAME="cc_provid" VALUE="0"> </TD>
</TR>
<TR ID="CAprov" STYLE="visibility: collapse;">
<TD>Province</TD>
<TD><SELECT NAME="cc_provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD>
</TR>
<TR ID="USstate" STYLE="visibility: collapse;">
<TD>State</TD>
<TD><SELECT NAME="cc_provid">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD>
</TR>
<TR ID="NLprov" STYLE="visibility: collapse;">
<TD>Province</TD>
<TD><SELECT NAME="cc_provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="201">Drenthe</OPTION>
<OPTION VALUE="202">Gelderland</OPTION>
<OPTION VALUE="202">Friesland</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>