Homer_J Homer_J - 9 days ago 4
Javascript Question

Javascript display = 'block'

I have some code that shows a tables row when something is clicked. So, the row has it's style attribute disabled, see below:

HTML

<tr id='Asset' class='rrtr' style='display:none;'>


The user clicks and fires the Javascript, which works fine:

Javascript

document.getElementById("Asset").style.display = 'block';


However, the style of the row isn't in line with rest even though it's class attributes are set to 'rrtr' like the rest.

If I turn off 'display:none;' on the row and run it showing, the format is fine.

Any ideas?

Answer

For best compatibility, set

document.getElementById("Asset").style.display = '';

Internet Explorer 7 and lower do not support table-row as a value for display. Alternatively– and, arguably, a better idea is to – set a class for the row and remove/change it using JS:

<tr id='Asset' class='rrtr rrtr-hidden'>
<!-- .rrtr-hidden { display: none; } -->
// Remove class `.rrtr-hidden`
document.getElementById("Asset").className = 'rrtr';