Question

我有一个表，我想在运行时更改单元格的colspan / rowspan属性。这是一个例子：

<html>
    <head>
        <script type="text/javascript">
            function setColSpan() {
                document.getElementById('myTable').rows[0].cells[0].colSpan = 2
            }
        </script>
    </head>

    <body>
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <form>
            <input type="button" onclick="setColSpan()" value="Change colspan">
        </form>
    </body>

</html>

我的问题是细胞移位了。我是否应该移除有问题细胞跨越的细胞？

我可以不删除吗？

我想实现一个简单的电子表格。现在，我设法能够选择一个矩形范围的单元格，并显示一个带有“合并选定单元格”选项的菜单。我希望能够“取消合并”细胞，所以跨越细胞而不必移除其他细胞会很好。

Answer 1

我认为您需要删除该单元格。请检查以下代码。我所做的是删除了整行，并添加了新的列跨度

function setColSpan() {
    var table = document.getElementById('myTable');
    table.deleteRow(0);
    var row = table.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML= "cell 1"
    cell.colSpan = 2
}

Answer 2

细胞移位是因为那是你告诉它要做的事情。你正在定义一个这样的表：

<tr>
    <td colspan="2">cell 1</td>
    <td>cell 2</td>
</tr>
<tr>
    <td>cell 3</td>
    <td>cell 4</td>
</tr>

所以你所看到的转变正是我所期待的。

如果要合并单元格，则必须获取所有合并单元格的内容，将它们连接到单个单元格中，然后删除其余单元格。对于简单的例子，它是这样的：

function setColSpan() {
    var myTable = document.getElementById('myTable');
    var cell2html = myTable.rows[0].cells[1].innerHTML;
    myTable.rows[0].deleteCell(1);
    myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html;
    myTable.rows[0].cells[0].colSpan = 2;
}

然而，更强大的解决方案是......有点复杂。特别是如果你想要取消合并的能力。您必须以某种方式保留旧单元结构的信息......可能会在合并数据周围添加<span class="oldCell">cell 2</span>之类的内容吗？然后检查＆＃34; oldCell＆＃34;是否存在在取消合并时跨度？但是，您必须通过用户编辑保留该信息。并找出跨行和列合并的含义。并且还要弄清楚这对于重叠合并意味着什么。

为单元格设置colspan / rowspan

2 个答案: