表格内的<div style display ="none">无效

Question

我试图使用javascript切换div元素的显示,该div元素具有标签和文本框.这是代码片段

<table id="authenticationSetting" style="display: none">
<div id="authenticationOuterIdentityBlock" style="display: none;">
                <tr>

                    <td class="orionSummaryHeader"><orion:message key="policy.wifi.enterprise.authentication.outeridentitity"/>: </td>
                    <td class="orionSummaryColumn">
                        <orion:textbox id="authenticationOuterIdentity" size="30"/>
                    </td>

                </tr>
                </div>

            </table>

但是在页面加载时div元素仍然显示,表格元素的显示切换工作正常.我不知道为什么这不起作用,可能是table元素的样式覆盖了div元素的样式.PS我仍然能够隐藏div中的元素而不是div本身.

Answer 1

只需<div>改为<tbody>

<table id="authenticationSetting" style="display: none">
  <tbody id="authenticationOuterIdentityBlock" style="display: none;">
    <tr>
      <td class="orionSummaryHeader">
        <orion:message key="policy.wifi.enterprise.authentication.outeridentitity" />:</td>
      <td class="orionSummaryColumn">
        <orion:textbox id="authenticationOuterIdentity" size="30" />
      </td>
    </tr>
  </tbody>
</table>

Answer 2

从语义上讲，您正在尝试的是无效的 html，table元素不能将div元素作为直接子元素。你可以做的是，把你的div元素放在一个td元素中，而不是试图隐藏它