logo标签列表

为单元格设置colspan/rowspan

javascripthtmlhtml-table
19

我有一个表格，希望在运行时更改单元格的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>

我的问题是单元格会移位。我应该删除跨越所问单元格的单元格吗？

如果不想删除，我该怎么做呢？

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

如果您想合并单元格，那么其中的值怎么样？您想要将两个单元格的值连接起来吗？ - Hary
@DON，理想情况下，我希望能够以某种方式保留该值（也许只需隐藏“被覆盖”的单元格？）。如果不行，就删除它。 - warvariuc
2个回答
31

我认为你需要删除该单元格。请查看以下代码。我的做法是删除了整行, 然后添加新的带有新列跨度的行。

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
}
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"跨度的存在？但是，您必须通过用户编辑来保留该信息。并找出这对于跨行和跨列合并意味着什么。还要弄清楚这对于重叠合并意味着什么。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接