display:block无法识别TR中的TD?

问题描述 投票:0回答:1

我有根据所选国家/地区切换省和州的代码(请参见底部的代码)。该代码的功能正常,但浏览器似乎不再识别显示为<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">&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>
javascript html-table tr
1个回答
0
投票

使用其他可行的解决方案获得了更实际的响应。

对于同样的问题,请使用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>
© www.soinside.com 2019 - 2024. All rights reserved.