<tr> element's style.display property hack

In order to dynamically set the <tr> element's style.display property from Javascript code, we need to set a different value for different browsers.

For example, in IE, the Javascript code would be,

tr.style.display = 'block';

And in Chrome/Firefox, the Javascript code would be,

tr.style.display = 'table-row';

This means that the Javascript code will have to first do a browser detection and then accordingly set the style.display value.

However, a much simpler solution is to just set the style.display property to nothing - this causes it to assume its default value (which is block for IE and table-row for Firefox, Chrome, etc.)

This is how the much simpler Javascript code would look like,

tr.style.display = '';  // not a double quote, but 2 single quotes

Keep Reading...