473,842 Members | 1,901 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Nested Collapsible Tables

5 New Member

this is my first time posting here, so be please be nice. If i do something incorrectly (and admin notices), please let me know of my mistake.

So, I am attempting to make nested tables that can be toggled and collapse, the problem is that the javascript code that I have does not support that, and I do not know enough javascript to fix it.

here is the code

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.     function getItem(id)
  3.     {
  4.         var itm = false;
  5.         if(document.getElementById)
  6.             itm = document.getElementById(id);
  7.         else if(document.all)
  8.             itm = document.all[id];
  9.         else if(document.layers)
  10.             itm = document.layers[id];
  12.         return itm;
  13.     }
  15.     function toggleItem(id)
  16.     {
  17.         itm = getItem(id);
  19.         if(!itm)
  20.             return false;
  22.         if(itm.style.display == 'none')
  23.             itm.style.display = '';
  24.         else
  25.             itm.style.display = 'none';
  27.         return false;
  28.     }
  29. </script>
here is a html sample (that i been using to test before i write the actual html page that i need) :

Expand|Select|Wrap|Line Numbers
  1. <table>
  2.     <tbody>
  3.         <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody')">Toggle</a></td></tr>
  4.     </tbody>
  6.     <tbody id="myTbody">
  7.         <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbodyNested')">Toggle Nested</a></td></tr>
  8.     </tbody>
  10.     <tbody id="myTbodyNested">
  11.         <tr><td>Test row1</td></tr>
  12.     </tbody>
  13. </table>
I am pretty sure this code is like widely known, which is why I used it, but I would like toggleItem to be recursive. The main issue is that when you click Toggle, Test row1 still appears.

Thanks for the help in advanced.

Ps. The purpose of this code is for my Instrumented Profiler that I am writing in C++, and I would like it to write out an html file (which im writing out the tags manually), to display all the function calls with the children function calls being the nested table (and the children of the children and so on).
Apr 9 '09 #1
4 5626
8,658 Recognized Expert Moderator Expert
that is because myTbodyNested is not nested, but a sibling element and therefore not affected by the display change in myTbody. to toggle both you need to toggle the whole table (where both tbody are children). (or adapt the Javascript to do so)
Apr 9 '09 #2
5 New Member
Thank you so much, Dormilich...

I made two separate tables, with the main table toggling the second table, and it works perfectly
Apr 9 '09 #3
5 New Member
Hello, maybe you can help me again...

So, since I am making an Instrumented Profiler, the data that I have is something like this:

>Game::Update ()
>>Input_Engine: :ProcessInput()
>>Physics_Engin e::UpdateAllObj ects()
>>>Physics_Engi ne::UpdateObjec t()
>Game::Render ()
>>Graphics_Engi ne::RenderAllOb jects()
>>>Graphics_Eng ine::RenderObje ct()

(I think its pretty self explanatory, but if you need me to explain, I could)

So, I made code for nested collapsible tables, like you told me, but after the second level, it doesn't do it anymore, and I am unsure if its the javascript or the HTML code.

The javascript is the exact same, but the code is now this:

Expand|Select|Wrap|Line Numbers
  1. <table>
  2.     <tr>
  3.         <td>
  4.             <a href="#" onclick="toggleItem('myTbody')">Toggle</a>
  5.         </td>
  6.     </tr>
  8.     <table id="myTbody">
  9.         <tr>
  10.             <td>
  11.                 <a href="#" onclick="toggleItem('myTbodyNested')">Toggle Nested</a>
  12.             </td>
  13.         </tr>
  15.         <table id ="myTbodyNested">
  16.             <tr>
  17.                 <td>
  18.                     <a href="#" onclick="toggleItem('myTbodyInnerNested')">Toggle Inner Nested</a>
  19.                 </td>
  20.             </tr>
  22.             <table id ="myTbodyInnerNested">
  23.                 <tr>
  24.                     <td>Test row</td>
  25.                 </tr>
  26.             </table>
  27.         </table>
  28.     </table>
  29. </table>
Logically speaking, top table has one row, and a inner table that should be shown when the row's data is clicked. That inner table has one row, and a inner inner table that should be shown when its own row's data is clicked. On, and on.

But the problem is that when the inner table is shown, the inner inner table is still shown.
Apr 10 '09 #4
8,658 Recognized Expert Moderator Expert
(not really up yet) what I can see on first glance is, that your table isn't valid (from the mark-up point of view). you need to nest the tables properly inside <td>. maybe you can switch even to <div>, depending on the table content…
Apr 10 '09 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Bootstrap bill | last post by:
I'm looking to create collapsible tables, similar to the outlines available in Microsoft Excel and Open Office spreadsheet. I'd prefer something cross platform. Is something like this available online? I've been searching for months, but haven't found anything remotely close. -- "It's easy enough to be pleasant, when life hums along like a song. But the man worth while is the man who can smile when
by: George Durzi | last post by:
I have a DataSet with 3 tables, and two DataRelations dsSubs.Tables.TableName = "Subscriptions" dsSubs.Tables.TableName = "AccountManagers" dsSubs.Relations.Add "AccountManagers_Subscriptions", dsSubs.Tables.Columns dsSubs.Tables.Columns) dsSubs.Tables.TableName = "NewsFeeds"
by: Thu | last post by:
Hi, I create a Dataset to link three tables in my Access database. E.g. The three tables are , , . I then create 2 DataRelations, 1st relation (Order_Cust_Rel) links and using CustomerID field that exists in both tables and 2nd relation (Order_Product_Rel) links and using ProductID field. I set the nested property of the relations to True so that the output will be nested. I then use WriteXML to output the dataset to a StreamWriter.
by: jobs | last post by:
I have two Nested repeating Datalists with different data sources. Currently the second Datalist is set to visible=false I have an oncommand button on the first, that when selected I would like to make it's sub datalist visible. I'm a bit confused about how to refrence the instance of the second datalist.
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...
by: mahesh123 | last post by:
I am using Collapsible Panel in my project.But in other form of my project i want to use collapsible panel inside other Collapsible panel.Is it possible. Both panels are to be dinamic.Is it possible can any one help me plz. My requirement is I am having different A's. Under each A Can have different B's. For each B can have diffrent C's.
by: =?Utf-8?B?R2lvcmdpbw==?= | last post by:
Hi, I am having a problem and I need some help. I have a listview with a collapsible panel that has a updatepanel and listview inside updatepanel and I have a button that triggers the collapsible panel and this button is outside the updatepanel. The collapsible panel works well when the button is clicked and expands BUT the updatepanel that is inside the expanded panel does not display the other listview! The trigger for update panel...
by: wojski696969 | last post by:
Hi.. I'm using ASP.NET AJAX Control Toolkit. I've got collapsible extender (CE) putted inside of modal popup extender (MPE), and there is a problem if i scroll the page when collapsible area is visible. I mean the shadow under MPE is getting bogger when CE is showing itself, and restores to previouse size after collapsible panel hides, but.. If i show collapsible panel, scroll the page and then hide that panel, the shadow from MPE stays in...
by: veenna | last post by:
i have a grid inside a collapsible panel in my page. on expand of collapsible panel i want to bind data to grid. how can i do this? how to get the events of collapsible panel. please help regards, veena.
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.