【发布时间】：2019-11-03 14:42:47
【问题描述】：
我有根据所选国家/地区切换省和州的代码（请参阅底部的代码）。该代码的功能运行良好，但浏览器似乎不再识别显示为 display:block; 的 <TR> 有两个 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>
当我在下面的主代码中的id=Default TR 中使用class="show" 而不是display:block 时，它会按应有的方式呈现，但将.style.display='block'; 和.style.display='none'; 更改为.className='show'; 和.className='hide'; showStates 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>
【问题讨论】：
-
默认情况下，
<table>中的<td>元素是display: table-cell;而不是block。 -
<script> .show { display: block; } ...</script>? CSS 必须包裹在<style>标签中 -
@Andreas 不确定您的评论是关于什么的，它们在脚本中，请参阅代码
<script> .show { display: block; } .hide { display: none; } </script>我错过了什么？ -
是的，正如我已经说过的。 CSS 必须在
<style>和 not<script>标签中 -
@Paul
<td>的正确可见显示样式是“table-cell”而不是“block”。样式“块”不仅仅意味着“可见”；这是一个特定的布局说明。
标签： javascript html-table tr