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

Question

Basically, I have a table. Onload, I set each row of the table to display:none since I have a lot of javascript processing to be done and I don\'t want user to

Answer 1

IE7 and below use display: block for table elements; the other browsers correctly use table-row, table-cell etc.

Whilst you could browser-sniff and choose different display values, it's much easier to hide a row indirectly. Add a stylesheet rule like:

.hidden { display: none; }

and then change the className of the row element to include or not include the hidden class. When the class is removed, the display style will jump back to its default value, whichever that is on the current browser.

You can also use containment selectors to hide multiple elements inside one element, then make them all visible/hidden at once by changing one class. This is faster than updating each style separately.

i have a lot of javascript processing to be done and i don't want user to see it while it is being done.

They generally won't anyway. Changes usually don't render on-screen until control has passed out of your code back to the browser.

Answer 2

Maybe it's not applicable everywhere but...
Use a parent element (e.g. <div> or something) with desired display and set display to inherit on show. like so:

function toggleDisplay(){
  $('#targetElement').toggleClass('hide');
  $('#targetElement').toggleClass('show');
}

#targetElement{
  width:100px;
  height:100px;
  background-color:red;
}

.hide{
  display:none;
}

.show{
  display:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="intermediateElement" style="display:inline-block">
  <div id="targetElement" class="show"></div>
</div>

<button onclick="toggleDisplay()">Toggle</button>

Answer 3

Revert value to default:

display: unset;