...

View Full Version : Simple solution to collapsible rows



HIPPY
07-04-2006, 08:52 AM
I have been looking around for quite some time for a simple piece of code that allows rows to be collapsed in tables, so when you click on a link in the tbale the row beneath collapses. All i have found are very complex codes that i cant get to work or that dont work in both IE and FF.

If someone could point me in the right direction on how to make it myself by using a simple javascript based method that would be great

snow
07-04-2006, 09:31 AM
make the <tr> you want hidden have the attribute
<tr style="display:none"> (or do it in your CSS).

Then put an "onmousedown" type event for the link, calling a function (with the parameter holding the tr id, i.e.
onmousedown="showHideRow('row1')

Then for the function write:

function showHideRow(rowId) {
row = document.getElementById(rowId)
if (row.style.display=="block")
row.style.display="none";
else
row.style.display="block";
}
}

Hope that helps!

_Aerospace_Eng_
07-04-2006, 09:52 AM
Or more efficient

function showHideRow(rowId) {
row = document.getElementById(rowId)
row.style.display = (row.style.display == 'block')? 'none' : 'block';
}

snow
07-04-2006, 09:56 AM
Heh, that syntax has always been a pet hate of mine... I prefer code readable rather than efficient. :p

HIPPY
07-04-2006, 04:54 PM
thanks alot its all workin good, very simple piece of code as well

A1ien51
07-05-2006, 02:56 PM
SHowing a table row should use "table-row" for Mozilla and "block" for IE. Simple try catch will allow you to do it.

Eric

Beagle
07-05-2006, 03:03 PM
Or more efficient

function showHideRow(rowId) {
row = document.getElementById(rowId)
row.style.display = (row.style.display == 'block')? 'none' : 'block';
}

Just to clarify, this is only effiency in terms of how much you code versus what it does. This does NOT process more quickly than the simple conditional statement.

Though, one could argue you save a few bytes of data transfer when sending over the JS file since the code is slightly smaller, but you only feel that once on page load, not during execution of the code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum