дисплей: блок не распознает TD в TR? - PullRequest
Новая
       21

дисплей: блок не распознает TD в TR?

0 голосов
/ 03 ноября 2019

У меня есть код, который переключает провинции и штаты в зависимости от выбранной страны (см. Код внизу). Функционально этот код работает нормально, но браузер больше не распознает, что <TR>, который отображается как display:block;, имеет два TD.

Если установлено display:block;, вместо того, чтобы показывать эти два TD,поэтому они совпадают со страной, она отображается так, как будто есть только один 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>   


<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 в id=Default TRв основном коде ниже он рендерится как следует, но изменение .style.display='block'; и .style.display='none'; на .className='show'; и .className='hide'; в javascript showStates для переключения между show и hide нарушает функциональность. 

<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>

1 Ответ

0 голосов
/ 04 ноября 2019

Получил более практичный ответ с реально работоспособным решением в другом месте.

Для тех, у кого такая же проблема, вместо использования 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>
...