inside a table not working

Question

I am trying to toggle display of a div element which has a label and a textbox using javascript. Here is the code snippet

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

However on page load the div element still displays ,the display toggling for the table element is working fine. I am at a loss as to why this is not working,could it be that the style of the table element is overriding the style of the div element. P.S. I am still able to hide elements inside the div but not the div itself.

Looks like you're putting a `div` where it shouldn't be; wrapped around a `tr` element. — Rick Viscomi, Jul 04 '13 at 03:33
your html is invlid, table should have `tr` then `td`, inside `td` your content should be added — Arun P Johny, Jul 04 '13 at 03:34
so u're saying div elements shouldn't be wrapping tr elements. Is there any other way I could toggle display of a table row? — Contemplating, Jul 04 '13 at 03:36
Possible duplicate of [Hiding table data using
](http://stackoverflow.com/questions/6910349/hiding-table-data-using-div-style-displaynone) — Heretic Monkey, Apr 20 '17 at 15:03

aifarfa · Accepted Answer · 2016-11-30T04:28:14.457

21

simply change <div> to <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>

edited Nov 30 '16 at 04:28

answered Jul 04 '13 at 03:38

aifarfa

3,939
2
23
35

1

Thanks this works and so does But this is screwing up the existing style of my table...wonder why that's happening – Contemplating Jul 04 '13 at 04:11
yes - correct, good solution but screwing up the layout of the table – java Jun 17 '16 at 19:51
1

visibility: hidden can be used (instead of display: none) if you want to hide an element, but you want it to still affect the layout as if it was not hidden. – dyeray Sep 20 '16 at 11:27

score 6 · Answer 2 · answered Jul 04 '13 at 03:34

6

Semantically what you are trying is invalid html, table element cannot have a div element as a direct child. What you can do is, get your div element inside a td element and than try to hide it

answered Jul 04 '13 at 03:34

Mr. Alien

153,751
34
298
278

inside a table not working

2 Answers2

Linked