It is believed that no versions of Internet Explorer (including IE8) support the "visibility" property
value "collapse". But guess what! You can use "visibility: collapse" for your rows in a table in HTML:
First of all why use "visibility: collapse;"?
"visibility: collapse;" hides an element entirely (so that it doesn't occupy any space in the layout), but only when the element is a table element.
If used on elements other than table elements, "visibility: collapse;" will act like
Source: W3 reference
So now if you wish to hide certain rows of your table and display them dynamically based on certain action then you can do the following:
First of all why use "visibility: collapse;"?
"visibility: collapse;" hides an element entirely (so that it doesn't occupy any space in the layout), but only when the element is a table element.
If used on elements other than table elements, "visibility: collapse;" will act like
visibility:hidden This makes an element invisible, but it will still occupy space in the layout. display:none hides an element entirely, so it doesn't occupy any space in the layout, but it shouldn't be used on table elements.Source: W3 reference
So now if you wish to hide certain rows of your table and display them dynamically based on certain action then you can do the following:
1. First assign a class to the <table>. For eg:
1: <table class="tableClass">
2. Create rows in table and assign class to these rows as well as shown below
1: <tr class="rangeTR" style="visibility: collapse;">
2: <tr class="listTR" style="visibility: collapse;">
Notice we have assigned the style element style="visibility: collapse;" to these rows.
Hence, on page load these rows will not be visible.
3. Now with the help of JQuery you can write a code to control the display of these <tr> tags.
Following is the code for it:
//Get all the rows of the table into a JavaScript object
var rows = $('table.tableClass tr');
//Get the handle to each row using their class names
var rangeTR = rows.filter('.rangeTR');
var listTR = rows.filter('.listTR');
//Now to make the row visible use this
rangeTR.css("visibility", "visible");
//To hide the row use this
listTR.css("visibility", "collapse");
That's it!
Now you can control your the display of rows in a table dynamically.
No need to use "display:none".
Hope this is helpful.
Comments and suggestions are appreciated.
No comments:
Post a Comment