使用 Javascript 更改表结构答案

【问题标题】：Change table structure with Javascript使用 Javascript 更改表结构
【发布时间】：2017-10-26 05:05:40
【问题描述】：

我有一个（左侧）菜单侧边栏，我想允许用户打开关闭。有代码使其下拉和折叠，折叠时留下空白但是，站点扩展相邻窗格中的内容以填充菜单所在的位置可能看起来更好。现在菜单在表格的单个单元格中，内容在右侧的单个单元格中，都在同一行中。我想避免更改行中的单元格数量，因为这会与上方和下方的行冲突。因此，一种方法是在两个单元格（包括菜单）和一个单元格之间切换，其中一个单元格的内容但 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>

【问题讨论】：

你在<td> 周围有一个<a>，这是行不通的，浏览器会重写它，所以<a> 在<td> 中。需要记住的一点。
好点。以上有缺陷，但希望有解决方法。

标签： javascript css html-table toggle

【解决方案1】：

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

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

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

【讨论】：