javascript - 使用 Javascript 更改表结构

Question

我有一个(左)菜单侧边栏，我想让用户打开它。有代码让它下拉并折叠起来，折叠时留下空白但是，站点将相邻 Pane 中的内容扩展到填充菜单的位置可能看起来更好。现在菜单在表格的单个单元格中，内容在右边的单个单元格中，都在同一行中。我想避免更改行中的单元格数量，因为这会与上下行发生冲突。因此，一种方法是在具有两个包含菜单的单元格和一个具有内容但 colspan 为两个的单元格之间切换。我的理解是 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>

Answer 1

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

如果表格连接到它下面的任何东西，而你需要使用 colspan，那么我看不到一个简单的方法来做到这一点..

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