HTML Table Rows

Question

What is the best way to turn off the visibility of a row(s) and have the gaps removed. Also the reverse, if turning on the visibility making sure that the visible row(s) are displayed again. Thanks

Answer 1

If you wish to do this on the client (i.e. through javascript) try set the style.display to 'none' (and 'block' to turn it back on).

If you wish to handle it on the server set the visibility of the row to false, this will prevent the row from rendering.

Edit - With example:

function ShowHideRow(row, show)
{
    document.getElementById(row).style.display = (show ? 'block' : 'none');
}

note you may wish to follow the advise of Mufasa and use table-row instead of block.

Answer 2

You need to set the 'display' property of the row (the ) to 'none'. Through either JavaScript as Chris said or with CSS.

Answer 3

Chris is right, except setting the value back to the correct table display type would be a little more correct when showing it again. For a <TR>, you would use display: table-row. See CSS Display Property.

Update: bobince's response is a more practical response on how to use (and not use) the display attribute.

Answer 4

If you do it with the display property as suggested so far, you have to worry about block vs. table-row. table-row is correct, but IE doesn't support it, so you have to browser-sniff to choose.

Potentially easier is to avoid setting the style directly, doing it with a CSS class rule instead:

tr.hidden { display: none; }

row.className= 'hidden'; // sets display to none
row.className= ''; // resets display to its default value