javascript - 单击按钮时调整 colspan

Question

我的问题是，当我单击“span cell 1”按钮时，colspan 已正确完成，但头部 td 被扩展，并且随着表大小的增加，表布局受到干扰。它不能管理剩余的列吗？

如果我单击跨度单元格 1 按钮，则第一个 td 是前 3 个标题中的跨度。那么剩余的 td 应该位于一个 header 中。

function function1() {
  document.getElementById("myTableHeader").colSpan = "3";
}
function function2() {
  document.getElementById("myTd1").colSpan = "3";
}
function function3() {
  document.getElementById("myTd2").colSpan = "2";
}
function function4() {
  document.getElementById("myTableHeader").colSpan = "1";
  document.getElementById("myTd1").colSpan = "1";
  document.getElementById("myTd2").colSpan = "1";
}

<table>
  <tr>
    <th align="center" bgcolor="blue" style="color:white;">First Header</th>
    <th id="myTableHeader" bgcolor="green" style="color:white;" width="140">Second Header</th>
    <th align="center" bgcolor="red" style="color:white;" width="140">Third Header</th>
    <th align="center" bgcolor="gray" style="color:white;" width="140">Fourth Header</th>
  </tr>
  <tr>
    <td id="myTd1">Cell 1 content</td>
    <td>Cell 2 content</td>
    <td id="myTd2">Cell 3 content</td>
    <td>Cell 4 content</td>
  </tr>
</table>
<input type="button" name="S1" value="Span Second Header" onClick="function1();">
<input type="button" name="S2" value="Span Cell 1" onClick="function2();">
<input type="button" name="S3" value="Span Cell 3" onClick="function3();">
<input type="button" name="S4" value="Restore" onClick="function4();">

Answer 1

but the ahead td's are extend.and table layout is disturb

事情应该是这样的。您需要删除该单元格，该单元格空间将被跨越单元格占用。

您可以使用 colspan/rowspan 属性在编辑器中编辑 HTML，而不是使用 javascript，以便更好地理解它的工作原理。