I’ve been somewhat stumped trying to create some JavaScript to successfully collapse table rows, but I think I’ve finally come up with something that seems to work pretty well. I tried setting display: none; on the TR element and on each TD element, but when I set display: block; Gecko browsers don’t display the row correctly.
What seems to work is putting a span around the content of each cell and setting display: none; on each span. With the content removed from each cell, the row collapses nicely. This could be a bit verbose if you’re trying to target rows randomly, but it you only wnat to hide and show a single row (known in advance) this seems to do the trick.
Anyone have other/better ideas I should look at?
Did you try setting display to “table-row”?
What does that do?
In gecko you should probably be setting the display(s) to table-row and table-cell
respectively.
They are part of teh CSS spec that Gecko has implemented that lets you display things like tables and table rows.
What does display: table-row; do? Syntax or URL please? Of course a gecko only solution isn’t a solution, but it’s nice to know the options.
ColdFusion cfdump command generates a very nice collapsible row option. If you cannot find a good example, email me and I will send you a good example.
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)
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 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.
Hmm… works great in Gecko, fails in IE. Bummer!
Try to reset the display string to “” to reshow it:
Hide: “none”
Show: “”
This should work cross-browser.
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.
Yep, that works beautifully. Thanks!
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 🙂
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!
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?
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.
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
To hide the row, set display=”none”
To show the row, set display=””
That was already posted above.
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.