13

我有一张桌子，我想在运行时更改单元格的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>

我的问题是细胞移位。我应该删除有问题的单元格跨越的单元格吗？

我可以不删除吗？

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

4

2 回答 2

25

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

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
}
于 2013-02-01T04:25:57.313 回答
1

细胞会发生变化，因为这就是你告诉它要做的事情。您正在定义这样的表：

<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>在合并数据周围放置类似的东西？然后在取消合并时检查“oldCell”跨度是否存在？但是，您必须通过用户编辑来保留该信息。并弄清楚这对于跨行和列合并意味着什么。还要弄清楚这对重叠合并意味着什么。

于 2014-04-14T14:49:09.533 回答