使用Javascript更改表结构

时间:2012-04-21 18:12:30

标签: javascript css html-table toggle

我有一个(左)菜单边栏,我想让用户关闭。有代码使其下拉和折叠,折叠时留下空白但是,站点可能看起来更好地扩展相邻窗格中的内容以填充菜单所在的位置。现在菜单在表格的单个单元格中,内容在单个单元格中,在同一行中。我想避免改变行中的单元格数量,因为这会与上面和下面的行冲突。因此,一种方法是在两个单元格(包括菜单)和一个单元格(包含内容但是两个单元格)之间切换。我的理解是Javascript下拉列表通过预加载两个版本然后隐藏一个版本来工作。是否有可能使Javascript更改表结构?想象一下,它看起来像下面的东西,但这本身并不起作用。

<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";
            }
        }

和身体:

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

1 个答案:

答案 0 :(得分:0)

这很棘手..我想说“不要使用表格进行布局!”有点晚了,但这基本上就是你的问题。

如果桌子连接到它下面的任何东西,你需要使用colspan,那么我看不到一个简单的方法来做到这一点。

我想你可以添加新行,包含n-1列和colspan,然后将所有HTML复制到新单元格中并删除旧行。但这会打破原始单元格上的任何JavaScript。