Nested Collapsible Tables

[dagabe14]

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

<script language="javascript">
    function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];

        return itm;
    }

    function toggleItem(id)
    {
        itm = getItem(id);

        if(!itm)
            return false;

        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';

        return false;
    }
</script>

here is a html sample (that i been using to test before i write the actual html page that i need) :

<table>
    <tbody>
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody')">Toggle</a></td></tr>
    </tbody>

    <tbody id="myTbody">
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbodyNested')">Toggle Nested</a></td></tr>
    </tbody>

    <tbody id="myTbodyNested">
        <tr><td>Test row1</td></tr>
    </tbody>
</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).

[Dormilich]

… but I would like toggleItem to be recursive. The main issue is that when you click Toggle, Test row1 still appears.

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)

[dagabe14]

Thank you so much, Dormilich...

I made two separate tables, with the main table toggling the second table, and it works perfectly

[dagabe14]

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_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:

<table>
    <tr>
        <td>
            <a href="#" onclick="toggleItem('myTbody')">Toggle</a>
        </td>
    </tr>

    <table id="myTbody">
        <tr>
            <td>
                <a href="#" onclick="toggleItem('myTbodyNested')">Toggle Nested</a>
            </td>
        </tr>

        <table id ="myTbodyNested">
            <tr>
                <td>
                    <a href="#" onclick="toggleItem('myTbodyInnerNested')">Toggle Inner Nested</a>
                </td>
            </tr>

            <table id ="myTbodyInnerNested">
                <tr>
                    <td>Test row</td>
                </tr>
            </table>
        </table>
    </table>
</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.

[Dormilich]

(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…