469,325 Members | 1,645 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,325 developers. It's quick & easy.

Nested Collapsible Tables

Hi,

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];
  11.  
  12.         return itm;
  13.     }
  14.  
  15.     function toggleItem(id)
  16.     {
  17.         itm = getItem(id);
  18.  
  19.         if(!itm)
  20.             return false;
  21.  
  22.         if(itm.style.display == 'none')
  23.             itm.style.display = '';
  24.         else
  25.             itm.style.display = 'none';
  26.  
  27.         return false;
  28.     }
  29. </script>
  30.  
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>
  5.  
  6.     <tbody id="myTbody">
  7.         <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbodyNested')">Toggle Nested</a></td></tr>
  8.     </tbody>
  9.  
  10.     <tbody id="myTbodyNested">
  11.         <tr><td>Test row1</td></tr>
  12.     </tbody>
  13. </table>
  14.  
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 5274
Dormilich
8,651 Expert Mod 8TB
@dagabe14
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
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
Hello, maybe you can help me again...

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

Main()
>Game::Update()
>>Input_Engine::ProcessInput()
>>Physics_Engine::UpdateAllObjects()
>>>Physics_Engine::UpdateObject()
>Game::Render()
>>Graphics_Engine::RenderAllObjects()
>>>Graphics_Engine::RenderObject()

(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>
  7.  
  8.     <table id="myTbody">
  9.         <tr>
  10.             <td>
  11.                 <a href="#" onclick="toggleItem('myTbodyNested')">Toggle Nested</a>
  12.             </td>
  13.         </tr>
  14.  
  15.         <table id ="myTbodyNested">
  16.             <tr>
  17.                 <td>
  18.                     <a href="#" onclick="toggleItem('myTbodyInnerNested')">Toggle Inner Nested</a>
  19.                 </td>
  20.             </tr>
  21.  
  22.             <table id ="myTbodyInnerNested">
  23.                 <tr>
  24.                     <td>Test row</td>
  25.                 </tr>
  26.             </table>
  27.         </table>
  28.     </table>
  29. </table>
  30.  
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
Dormilich
8,651 Expert Mod 8TB
(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

Post your reply

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

Similar topics

1 post views Thread by Bootstrap bill | last post: by
reply views Thread by George Durzi | last post: by
7 posts views Thread by Kamal | last post: by
reply views Thread by =?Utf-8?B?R2lvcmdpbw==?= | last post: by
5 posts views Thread by veenna | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.