view raw
Homer_J Homer_J - 5 months ago 32
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:


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

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


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?


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