?
Solved

Expandable/ Drill down table

Posted on 2006-07-12
3
Medium Priority
?
585 Views
Last Modified: 2012-06-21
Dear experts,


I would like to create a expandable/ drilldown html table.
For example, a table that displays all the county information of a state within the entire US.
The user should be able to click on an expand button next to the state the view the county information of each state.

The information will be pull from a database using Java.

Any advice are welcome.

Thanks
etalexit

0
Comment
Question by:etalexit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 7

Accepted Solution

by:
mmarksbury earned 400 total points
ID: 17095551
There are a few ways...

1. Pull all the information on page load.

2. Pull only the state information on page load and pull the counties on request using AJAX.

I'd go for #2 and get some AJAX experience under your belt (if you dont already have it).

So for example....with each state you might have...

<td>
     <a href="javascript:GetCounties('CA');">California</a><br />
     <div id="CA_Counties"></div>
</td>

Then you would write a Javascript function that uses AJAX to call the server and get all Counties for the state "CA".  Parse the response XML and populate the CS_Counties DIV with the values.
0
 

Assisted Solution

by:Colcob
Colcob earned 400 total points
ID: 17097002
I dont have any AJAX experience, so I can only tell you how to do it via mmarksbury's method 1.

I've done a technical library browser with pop-out subsections like this.

First, you have a javascript function called toggle, which simply changes the display style from block to none, or none to block.  Thus you can call that function on any block level element and it will show or hide it, regardless of its current state (i havent got the code to hand, but if its something you couldnt do yourself, I can dig it out).

You'll need to pull the full dataset of states and counties into the page, presumably as a two-level array, then its a case of creating your tables with hidden sections for the counties which are revealed when you click on the states.

Unfortunately, I dont think you can show/hide individual rows in a table, as they aren't block level elements, so I had to create the thing out of lots of separate tables and bunch them together with the styling. EG:

<table class="state"><tr><td><a onClick="javascript: toggle(stateCounties1)">State1</td></tr></table>
     <table class="county" id="stateCounties1">
       <tr><td>State1county1</td></tr>
       <tr><td>State1county2</td></tr>
       <tr><td>State1county3</td></tr>
    </table>

<table class="state"><tr><td><a onClick="javascript: toggle(stateCounties2)">State2</td></tr></table>
     <table class="county" id="stateCounties2">
       <tr><td>State2county1</td></tr>
       <tr><td>State2county2</td></tr>
       <tr><td>State2county3</td></tr>
    </table>

Etc:
So you use CSS to set table.county to display: none; so the counties dont show up to start with, all the id's and arguments in the toggle function need to be set by the values from the db so they tie up with eachother, and you should be good to go.

Note, I did this a while ago, and I suspect there is a more modern sematic way of doing it with Lists instead of Tables, but I havent tried it myself.  A UL is a block level element, so I'm sure you can probably use UL's instead of tables.


0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 200 total points
ID: 17103463
Just about everyone is doing this in javascript, like the two responses above.  Even microsoft does this on their "knowledgebase" webpages.  The issue you have to deal with is -- if you do it all in javascript, within the page, that page will become HUGE, and take a long time to load.

Therefore, I option 2 of mmarksburys above is definitiely the best.  Use a DIV for each county data, and keep the county data in separate files, and read those files into the DIV if and only if a person clicks on the link to the counties of that state.  A little more code, but a much faster site response.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question