Hiding Table Data Using <Div Style="Display:None">

Hiding table data using div style= display:none

Just apply the style attribute to the tr tag. In the case of multiple tr tags, you will have to apply the style to each element, or wrap them in a tbody tag:

<table>
  <tr><th>Test Table</th><tr>
  <tbody style="display:none">
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
  </tbody>
</table>

div style display= none inside a table not working

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>

Can't hide table row using display:none

You forgot td tag

<div>
  <div>
    <table>
      <tbody>
        <tr>
          <td>
            <table>
              <tbody>
                <tr style="display:none;">
                <td>
                  <div>
                    Example Row 1:
                  </div>
                  <div>
                    #1#
                  </div>
                  </td>
                </tr>
                <tr style="display:none;">
                <td>
                  <div>
                    Example Row 2:
                  </div>
                  <div>
                    #2#
                  </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

How can I hide an HTML table row tr so that it takes up no space?

I would really like to see your TABLE's styling. E.g. "border-collapse"

Just a guess, but it might affect how 'hidden' rows are being rendered.

How do I make a DIV set to style.display = none by default?

Your handler is click. It needs to be onclick. Also, I recommend either adding a class with display:none to your div, or simply inlining it, like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV" style="display: none">
 Hello World
</div>
<button onclick="showInfo()">
Show Info
</button>

Then your JS can look like this:

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}

Demo

function showInfo() {

  var x = document.getElementById("myDIV");

  if (x.style.display === "none") {

    return x.style.display = "block";

  }

  return x.style.display = "none";

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="myDIV" style="display: none">

     Hello World

    </div>

    <button onclick="showInfo()">

    Show Info

    </button>

Show/hide 'div' using JavaScript

How to show or hide an element:

In order to show or hide an element, manipulate the element's style property. In most cases, you probably just want to change the element's display property:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's visibility property instead:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Hiding a collection of elements:

If you want to hide a collection of elements, just iterate over each element and change the element's display to none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

hide(document.querySelectorAll('.target'));

function hide (elements) {

  elements = elements.length ? elements : [elements];

  for (var index = 0; index < elements.length; index++) {

    elements[index].style.display = 'none';

  }

}

<div class="target">This div will be hidden.</div>

<span class="target">This span will be hidden as well.</span>

hide td element depending on class from th

With jQuery, what about something like this ?

var nth_column=0;
var th_with_class=[]; /* columns whose th has a certain class */

get <th> with a certain class :

jQuery("th").each(function() {
    if ($(this).hasClass("foo")) {
        th_with_class.push(nth_column);
    }
    nth_column++;
});

And then, hide <th> and <tds> :

for (i; i<th_with_class.length; i++) {
    nth_column=th_with_class[i];
    $("tr > *:nth-child("+nth_column+")").addClass("hidden");
}

Div with display: none style appears anyway

Your div starts inside a table structure. This is not valid and guaranteed to mess up the rendering result:

   </td>
   </tr>
   <!-- No-no! Either end the table or start a new table row. -->
   <div id="hubspot-contact-form" style="display: none;">

It is likely that the div gets ignored, and the following trs get merrily rendered, even if they are supposed to be hidden. You need to fix the HTML first.

You need to integrate the DIV into the table somehow, either by introducing another table, or using tbody elements.

Always be sure to run your HTML through the validator when hunting for display bugs.

---

Related Topics