Comments on: Collapsing Table Rows http://alexking.org/blog/2004/10/27/collapsing-table-rows Alex King, Denver Web Developer Thu, 09 Feb 2012 18:02:12 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Adam the Chidge http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-65217 Adam the Chidge Thu, 30 Oct 2008 18:38:16 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-65217 Hello folks! I found out how to fix this by manipulating the className property of the row in DHTML in conjunction with the display:none and display:table-row css properties. e.g. if (rows[i].className=="show") rows[i].className = "hide"; And the CSS to accompany is: table tr .show {display:table-row;} table tr .hide {display:none;} DO NOT USE: row.style.visibility or row.style.display as for some reason in IE 7, it just doesn't return the correct styles or allow you to manipulate them, hence I used the class approach. Good luck. Hello folks!

I found out how to fix this by manipulating the className property of the row in DHTML in conjunction with the display:none and display:table-row css properties.

e.g.

if (rows[i].className==”show”)
rows[i].className = “hide”;

And the CSS to accompany is:

table tr .show {display:table-row;}
table tr .hide {display:none;}

DO NOT USE:

row.style.visibility or row.style.display as for some reason in IE 7, it just doesn’t return the correct styles or allow you to manipulate them, hence I used the class approach.

Good luck.

]]> By: Alex http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-30321 Alex Fri, 04 Aug 2006 17:02:10 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-30321 That was already <a href="http://alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2887">posted above</a>. That was already posted above.

]]> By: Ngan http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-30320 Ngan Fri, 04 Aug 2006 16:59:33 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-30320 To hide the row, set display="none" To show the row, set display="" To hide the row, set display=”none”

To show the row, set display=”"

]]> By: Sumthin Wicked http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-9425 Sumthin Wicked Wed, 23 Nov 2005 15:22:52 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-9425 something to inspire you (incomplete code) try: function IFE_GroupShowHide(groupID, show) { var oCell = document.getElementById(groupID + '_Grp'); var rows = eval(oCell.getAttribute('EnableFields')); if (rows) { for (var o in rows) { show ? IFE_Show(rows[o] + '_Row') : IFE_Hide(rows[o] + '_Row'); oCell.rowSpan += (show ? 1 : -1); } } } in combination with: <table> <tr bgcolor=#074F00> <td id='MasterRow_Grp' rowspan=3 valign=top width=100 EnableFields="['Row1_Row','Row2_Row']"><h4>Group name</h4></td> <td valign=top align=left>Hide</td> <td valign=top align=left><button value='Hide Them' onClick="IFE_GroupShowHide('MasterRow', false);"></td> </tr> <tr id='Row1_Row' bgcolor=#074F00> <td valign=top align=left>Key</td> <td valign=top align=left><input value='Value'></td> </tr> <tr id='Row2_Row' bgcolor=#074F00> <td valign=top align=left>Key2</td> <td valign=top align=left><input value='Value2'></td> </tr> </table> enjoy!, SumthinWicked something to inspire you (incomplete code) try:

function IFE_GroupShowHide(groupID, show)
{
var oCell = document.getElementById(groupID + ‘_Grp’);
var rows = eval(oCell.getAttribute(‘EnableFields’));

if (rows)
{
for (var o in rows)
{
show ? IFE_Show(rows[o] + ‘_Row’) : IFE_Hide(rows[o] + ‘_Row’);
oCell.rowSpan += (show ? 1 : -1);
}
}
}

in combination with:

<table>
<tr bgcolor=#074F00>
<td id=’MasterRow_Grp’ rowspan=3 valign=top width=100 EnableFields=”['Row1_Row','Row2_Row']“><h4>Group name</h4></td>
<td valign=top align=left>Hide</td>
<td valign=top align=left><button value=’Hide Them’ onClick=”IFE_GroupShowHide(‘MasterRow’, false);”></td>
</tr>
<tr id=’Row1_Row’ bgcolor=#074F00>
<td valign=top align=left>Key</td>
<td valign=top align=left><input value=’Value’></td>
</tr>
<tr id=’Row2_Row’ bgcolor=#074F00>
<td valign=top align=left>Key2</td>
<td valign=top align=left><input value=’Value2′></td>
</tr>
</table>

enjoy!, SumthinWicked

]]> By: Zayfod http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-8760 Zayfod Fri, 21 Oct 2005 14:19:59 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-8760 Recently I experienced the same problem but managed to solve it in a very portable way :) I was trying to collapse only some of the rows of a table which had an always visible "header" row. Copying the value of its display property when trying to "expand" any of the other rows worked flawlessly in all cases. Recently I experienced the same problem but managed to solve it in a very portable way :)

I was trying to collapse only some of the rows of a table which had an always visible “header” row. Copying the value of its display property when trying to “expand” any of the other rows worked flawlessly in all cases.

]]> By: theKeyper http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-7371 theKeyper Mon, 15 Aug 2005 06:56:29 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-7371 I am having a similar problem. Setting display to '' works to show the row, however I have one cell going down the left hand side of the page with a Rowspan of 5. If I hide one of the rows, It removes it from the rowspan in FF and stuffs up the table layout. (IE works fine). Any Ideas? I am having a similar problem. Setting display to ” works to show the row, however I have one cell going down the left hand side of the page with a Rowspan of 5. If I hide one of the rows, It removes it from the rowspan in FF and stuffs up the table layout. (IE works fine). Any Ideas?

]]> By: Gabriel http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-4948 Gabriel Wed, 13 Apr 2005 20:23:58 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-4948 Strangely this didn't work for me. So perhaps your fix is only a Windows fix as I'm currently viewing Firefox on Linux. However, I did manage to fix it anyway much the same way that you get Firefox and IE both to display the pointer/hand cursor: function showSearch() { var searchSpan = document.getElementById('searchSpan'); var status = searchSpan.style.display; if (status == 'table-row' || status == 'block') { searchSpan.style.display= 'none'; } else { searchSpan.style.display= 'block'; searchSpan.style.display= 'table-row'; } } The last bit is the weird part. Set to display:block and both IE and FF accept it. Set it to Table-row and IE ignores it (IE not supporting CSS2) and FF accepts it. Voila! Strangely this didn’t work for me. So perhaps your fix is only a Windows fix as I’m currently viewing Firefox on Linux. However, I did manage to fix it anyway much the same way that you get Firefox and IE both to display the pointer/hand cursor:

function showSearch() {
var searchSpan = document.getElementById(‘searchSpan’);
var status = searchSpan.style.display;
if (status == ‘table-row’ || status == ‘block’) {
searchSpan.style.display= ‘none’;
}
else {
searchSpan.style.display= ‘block’;
searchSpan.style.display= ‘table-row’;
}
}

The last bit is the weird part. Set to display:block and both IE and FF accept it. Set it to Table-row and IE ignores it (IE not supporting CSS2) and FF accepts it. Voila!

]]> By: dodo http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-4391 dodo Thu, 03 Mar 2005 01:37:03 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-4391 aw alex, i emailed you first and then did a google search and found this post. silly me. so i guess my problem is solved :) aw alex, i emailed you first and then did a google search and found this post. silly me. so i guess my problem is solved :)

]]> By: Alex http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2890 Alex Thu, 28 Oct 2004 14:29:00 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2890 Yep, that works beautifully. Thanks! Yep, that works beautifully. Thanks!

]]> By: Jon B http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2888 Jon B Thu, 28 Oct 2004 10:09:17 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2888 Sebastian is right - well apparently - I think someone di a test about this - maybe shaun inman - check his site - it was this exact same problem if I remember correctly - basically it suggests that block isn't the opposite to none - infact there is a css 'display' property for tables - however it isn't supported - so you you just want to remove teh style and let it default to whatever it would be normally. Sebastian is right – well apparently – I think someone di a test about this – maybe shaun inman – check his site – it was this exact same problem if I remember correctly – basically it suggests that block isn’t the opposite to none – infact there is a css ‘display’ property for tables – however it isn’t supported – so you you just want to remove teh style and let it default to whatever it would be normally.

]]> By: Sebastian http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2887 Sebastian Thu, 28 Oct 2004 06:31:52 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2887 Try to reset the display string to "" to reshow it: Hide: "none" Show: "" This should work cross-browser. Try to reset the display string to “” to reshow it:

Hide: “none”
Show: “”

This should work cross-browser.

]]> By: Alex http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2886 Alex Wed, 27 Oct 2004 23:54:09 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2886 Hmm... works great in Gecko, fails in IE. Bummer! Hmm… works great in Gecko, fails in IE. Bummer!

]]> By: Kyle http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2885 Kyle Wed, 27 Oct 2004 23:46:10 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2885 I ran into the same issue that you were having with hiding table rows. In your code give the row a id, then in your CSS set the id to display: none; Now use your javascript code to change the property to display: table-row. This will allow the row to hide and display as you need. That how I solved my issue anyway. I ran into the same issue that you were having with hiding table rows. In your code give the row a id, then in your CSS set the id to display: none; Now use your javascript code to change the property to display: table-row. This will allow the row to hide and display as you need. That how I solved my issue anyway.

]]> By: Alex http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2884 Alex Wed, 27 Oct 2004 22:16:46 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2884 I've read that page, I don't see the code to hide a row. Perhaps I'm blind and someone could post the syntax I should use? I’ve read that page, I don’t see the code to hide a row. Perhaps I’m blind and someone could post the syntax I should use?

]]> By: Mark IJbema http://alexking.org/blog/2004/10/27/collapsing-table-rows#comment-2883 Mark IJbema Wed, 27 Oct 2004 22:08:18 +0000 http://www.alexking.org/blog/2004/10/27/collapsing-table-rows/#comment-2883 http://www.w3.org/TR/REC-CSS2/tables.html#q2 It's standard CSS. It might be that msie doesn't render it and you need to fix msie (msie isn't really good with tables, you can't style non-tables as tables, nor can you style tables an non-tables in msie) http://www.w3.org/TR[...]bles.html#q2

It’s standard CSS. It might be that msie doesn’t render it and you need to fix msie (msie isn’t really good with tables, you can’t style non-tables as tables, nor can you style tables an non-tables in msie)

]]>