Question

<html>
<body>
<script language="JavaScript">
    function function1() {
        document.all.myTableHeader.colSpan = "3";
    }
    function function2() {
        document.all.myTd1.colSpan = "3";
    }
    function function3() {
        document.all.myTd2.colSpan = "2";
    }
    function function4() {
        document.all.myTableHeader.colSpan = "1";
        document.all.myTd1.colSpan = "1";
        document.all.myTd2.colSpan = "1"; 
    } 
</script>
<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();">
</body>
</html>

这是我的代码。问题是当我点击“span cell 1”按钮时，colspan正确完成，但是前面的td是extend.and表格布局是disturb.i意思是表格大小增加。它管理的剩下的栏目？如果我在span单元格1按钮中单击，那么第一个td将跨越前3个标题。然后剩下的td应该在一个header.suggest中。“/ / p>

先谢谢，

Answer 1

但是前面的td是extend.and table layout is disturb

这应该是这样的。您需要删除单元格，跨越单元格将占用哪个空格。

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

colspan调整点击按钮

1 个答案: