/    Sign up×
Community /Pin to ProfileBookmark

Collapsing table columns

Copy linkTweet thisAlerts:
Mar 14.2006

I have a table with has 10 columns and which is created using PHP following a search of an SQL database. What I’d like to be able to do is allow the user to be able to hide certain columns, possibly by clicking somewhere on the screen, i.e.

clicks button A: columns 1 – 3 are collapsed/hidden
clicks button B: columns 4 – 7 are collapsed/hidden
clicks button C: columns 8 – 10 are collapsed/hidden

I have been trying to research this and seems it could be done using the COL tag and setting visibility to collapse but I’m not sure whether this is the best way of doing it or even if it will work. Would appreciate any help or advice on how to go about it.

Thanks in advance.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMar 15.2006 — Yep, sounds like COL is the way to go. I've never tried it before (didn't know it existed), but I just read all about it (and a few other things) and it seems perfect for the job.

[URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects.asp]MS DHTML Objects[/URL]
Copy linkTweet thisAlerts:
@UltimaterMar 15.2006 — I tried messing with the COL however it doesn't seem to be working as expected...

If you gave every TD a class like so:
<i>
</i>&lt;table&gt;&lt;tbody&gt;
&lt;tr&gt;
&lt;td class="col1"&gt;&lt;td class="col2"&gt;&lt;td class="col3"&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="col1"&gt;&lt;td class="col2"&gt;&lt;td class="col3"&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;

It would be a matter of editing the actual class to toggle all the elements at once.

Unfortunately, to make it work cross-browser, you gotta use a mix between: insertRule and addRule..... maybe even a:

classes.row2.all.visibility="collapsed";

classes.row2.all.display="none";

Then do a test if none of these methods exist and fall-back to plain-old laggy JavaScript loops to apply it one-at-a-time if none of the methods exist.
Copy linkTweet thisAlerts:
@lxndrauthorMar 15.2006 — Would it be easier to achieve if I modified the display of results so that I actually had 3 separate tables within an enclosing table so that it looks like a single table .. in other words would it be easier to hide a complete table rather than individual columns. I'm afraid my knowledge of javascript is very limited so I'm just really trying to imagine other ways of achieving the same thing.



I tried messing with the COL however it doesn't seem to be working as expected...

If you gave every TD a class like so:
<i>
</i>&lt;table&gt;&lt;tbody&gt;
&lt;tr&gt;
&lt;td class="col1"&gt;&lt;td class="col2"&gt;&lt;td class="col3"&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="col1"&gt;&lt;td class="col2"&gt;&lt;td class="col3"&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;

It would be a matter of editing the actual class to toggle all the elements at once.

Unfortunately, to make it work cross-browser, you gotta use a mix between: insertRule and addRule..... maybe even a:

classes.row2.all.visibility="collapsed";

classes.row2.all.display="none";

Then do a test if none of these methods exist and fall-back to plain-old laggy JavaScript loops to apply it one-at-a-time if none of the methods exist.[/QUOTE]
Copy linkTweet thisAlerts:
@phpnoviceMar 15.2006 — Yes, you could do it that way.
Copy linkTweet thisAlerts:
@lxndrauthorMar 15.2006 — Yes, you could do it that way.[/QUOTE]

Can you give me an actual example of the code that I'd need to use to hide the table ?

Thanks.
Copy linkTweet thisAlerts:
@phpnoviceMar 15.2006 — This works in all modern browsers:

To hide/show an HTML element:

document.getElementById("elementID").style.display = "none";

document.getElementById("elementID").style.display = "block";
Copy linkTweet thisAlerts:
@UltimaterMar 15.2006 — Would it be easier to achieve if I modified the display of results so that I actually had 3 separate tables within an enclosing table so that it looks like a single table ..[/QUOTE]

Wow! Good thinking, that is the best method I ever heard for this since type of task. You deserve a star! I defintively will consider using this approach in the future in related tasks.
×

Success!

Help @lxndr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...