使用Java脚本更改表结构

Question

I have a (left) menu sidebar that I'd like to allow users to toggle on off. Have code to make it drop down and collapse up, leaving blankspace when collapsed However, it may look better for site to expand content in adjacent pane over to fill in where menu was. Right now menu is in single cell of table and content is in single cell to right, both in same row. I'd like to avoid changing number of cells in row as that would conflict with rows above and below. So one approach would be to toggle between having two cells incl menu and one cell with content but colspan of two. My understanding is that Javascript dropdowns work by preloading both versions and then hiding one. Would it be possible to make the Javascript change the table structure? Imagine it would look something like below but this does not, of itself, work.

<script type="text/javascript">
        function toggleBar(obj) {
            var navbar = document.getElementById("navbar");
            if (navbar.style.display == "none") {
                navbar.style.display = "";
                obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
            } else {
                navbar.style.display = "none";
                obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'><td colspan=2";
            }
        }

and in body:

<table><tr><div style="background-color:silver;width:100px">
<a href="javascript:void(0)" onclick="toggleBar(this);"><td><img src="images/collapse.gif" alt="Hide Menu"><div id="navbar" ><a href="javascript:void(0)" onclick="toggleBar(this);"></a></a>menu here<br>menu1<br>menu2</td><td></div></div>CONTENT GOES HERE<td></tr>
<table>

Answer 1

This is tricky .. I suppose it's a bit late to say "Don't use tables for layout!" , but that is essentially your problem.

If the table is connected to anything below it, and you need to use colspan then I don't see an easy way to do this ..

I suppose you could add new row, with n-1 columns and the colspan, then copy all the HTML over into the new cell and delete the old row. But that would break any JavaScript you might on original cell.