Javascript 显示：块不识别TR中的TDs？_Javascript_Html Table_Tr

Javascript 显示：块不识别TR中的TDs？
javascript
Javascript 显示：块不识别TR中的TDs？,javascript,html-table,tr,Javascript,Html Table,Tr,我有根据所选国家切换省份和州的代码（参见底部的代码）。该代码的功能正常，但浏览器似乎不再识别显示为display:block的有两个TDs 如果设置为显示：块，而不是显示这两个TDs，因此它们与国家/地区对齐，它呈现为只有一个TD，并同时显示省/州文本和下拉框。我花了几天时间尝试在这里和其他地方找到的不同建议，但仍然无法找到使渲染工作正常的解决方案根据我在这里发现的以下操作应该可以工作，但渲染仍然不正确 <TR ID="USstate" STYLE="display: none;"
我有根据所选国家切换省份和州的代码（参见底部的代码）。该代码的功能正常，但浏览器似乎不再识别显示为
display:block的
有两个TDs
如果设置为显示：块，而不是显示这两个TDs，因此它们与国家/地区对齐，它呈现为只有一个TD，并同时显示省/州文本和下拉框。我花了几天时间尝试在这里和其他地方找到的不同建议，但仍然无法找到使渲染工作正常的解决方案
根据我在这里发现的


以下操作应该可以工作，但渲染仍然不正确
<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>   


我很想听听关于为什么渲染会偏离轨道的建议。同样，这个问题与功能无关，因为下面的代码可以正常工作，它只是关于修复拙劣的渲染
如需澄清，请告知
<!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">&nbsp;</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>


.show{display:block；}
.hide{display:none；}
功能显示状态（国家/地区）
{如果（国家==“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'；
}
否则，如果（国家=“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'；
}
否则，如果（国家=“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'；
}
其他的
{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'；
}
返回false；
}
国家
加拿大
美国
德国
荷兰
省
选择省
纽芬兰/拉布拉多
新斯科舍省
安大略
爱德华王子岛
省/州
省
选择省
纽芬兰/拉布拉多
新斯科舍省
新不伦瑞克省
爱德华王子岛
陈述
选择状态
阿拉巴马州
亚利桑那州
阿肯色州
加利福尼亚
省
选择省
德伦特
盖德兰
弗里斯兰
得到了更实际的回应，在其他地方找到了实际可行的解决方案
对于具有相同问题的用户，请使用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">&nbsp;</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>


功能显示状态（国家/地区）
{如果（国家==“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'；
}
否则，如果（国家=“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'；
}
否则，如果（国家=“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'；
}
其他的
{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'；
}
返回false；
}
国家
加拿大
美国
德国
荷兰
省
选择省
纽芬兰/拉布拉多
新斯科舍省
安大略
爱德华王子岛
省/州
<!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">&nbsp;</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>

<!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">&nbsp;</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>