How to Revert Back to Normal After Display:None for Table Row

how to revert back to normal after display:none for table row

set display to an empty string - this will allow the row to use its default display value and so works in all browsers

Revert `display: none` on elements to original value

use: element.style.display = "" to reset style.display of an element

(() => {

  const displayState = reset => 

    Array.from(document.querySelectorAll("div"))

      .forEach( el => el.style.display = reset ? "" : "none" );

    //                                           ^ restore original display state

  document.querySelector("#showAll").addEventListener("click", () => displayState(true));

  document.querySelector("#hideAll").addEventListener("click", () => displayState());

})();

#first, #second, #third {

  display: inline-block;

  margin-right: 1em;

}

<div id="first">[First]</div>

<div id="second">[Second]</div>

<div id="third">[Third]</div>

<button id="showAll">show divs</button>

<button id="hideAll">hide divs</button>

Uneven table cells when changing display none

The default display option for table rows is table-row, you can't use block.

function show(elemid) {
    var elem=document.getElementById(elemid);
    elem.style.display='table-row';
}

When in doubt you can set a blank value to the display property, it will return to its default value.

This will work too.

function show(elemid) {
    var elem=document.getElementById(elemid);
    elem.style.display='';
}

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>

Is there an opposite to display:none?

display: none doesn’t have a literal opposite like visibility:hidden does.

The visibility property decides whether an element is visible or not. It therefore has two states (visible and hidden), which are opposite to each other.

The display property, however, decides what layout rules an element will follow. There are several different kinds of rules for how elements will lay themselves out in CSS, so there are several different values (block, inline, inline-block etc — see the documentation for these values here ).

display:none removes an element from the page layout entirely, as if it wasn’t there.

All other values for display cause the element to be a part of the page, so in a sense they’re all opposite to display:none.

But there isn’t one value that’s the direct converse of display:none - just like there's no one hair style that's the opposite of "bald".

Using .remove on a table row produces style of display:none

You are trying to remove a row which is parent of the row animated instead of the row itself.

This is because actual "this" value depends on the call site or if, like in most of jquery methods, to something explicitly forced.

In jquery "this" is usually forced to be the element you are acting on. So when you pass a callback to the fadeOut() method, inside this callback, "this" will point to the element that is faded out (in this case the row you want to remove).

Try this instead:

$(document).on('click', 'button#delete_x',  function () {
    $(this).closest('tr').fadeOut(500, function(){
        $(this).remove();
    });
});

...or even clearer:

$(document).on('click', 'button#delete_x',  function () {
    var me = $(this).closest('tr');
    me.fadeOut(500, function(){
        me.remove();
    });
});

Display none in table row

If I untherstand you you want to hide the NoveMeses div if your h3's span text is N.A.

So a simple javascript like this would make it happen

var nove_meses = document.getElementById('NoveMeses');

var h3s = document.querySelectorAll('.cellTextValue span');

    for(var i = 0; i < h3s.length; i++) {

        console.log(h3s[i].innerText);

        if(h3s[i].innerText == 'N.A.') {

            nove_meses.style.display = 'none';

        }

    }

<div id="NoveMeses" data-ng-if=$odd class="tableRowOdd" data-ng-show="item.TipoOWS === '9M'">

    <div class="tableCellContent20">

        <h3 class="cellTextType" >

            <span>{{::item.TipoCalculado.split('#')[1]}}</span>

        </h3>

    </div>

    <div id="row1" class="tableCellContent20">

        <h3 class="cellTextValue" data-ng-show="item.TipoOWS !== 'Datas'">

            <span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span

        </h3>

        <h3 class="cellTextValue" data-ng-show="!item.TipoOWS !== 'Datas'">

            <span>N.A.</span>

        </h3>

    </div>

    <div id="row2" class="tableCellContent20">

        <h3 class="cellTextValue" data-ng-show="item.TipoOWS !== 'Datas'">

            <span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span>

        </h3>

        <h3 class="cellTextValue" data-ng-show="!item.TipoOWS !== 'Datas'">

            <span>N.A.</span>

        </h3>

    </div>

</div>

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>

---

Related Topics