为单元格设置 colspan/rowspan答案

【问题标题】：Set colspan/rowspan for a cell为单元格设置 colspan/rowspan
【发布时间】：2013-01-16 08:49:29
【问题描述】：

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

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

我可以不删除吗？

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

【问题讨论】：

如果要合并单元格，那里面的值呢？您想连接两个单元格中的值吗？
@DON，理想情况下，我想以某种方式保留该值（也许只是隐藏“覆盖”单元格？）。如果没有，请删除。

标签： javascript html html-table

【解决方案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
}

【讨论】：

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

【讨论】：