使用 Javascript 合并单元格答案

【问题标题】：Merge cells using Javascript使用 Javascript 合并单元格
【发布时间】：2011-01-23 15:20:28
【问题描述】：

我在 Google 上搜索了 merge+cell+Javascript，但没有找到任何合适的代码来实现表格中的合并单元格。

是否有任何指导方针可以让我使用 Javascript 制作 MS-WORD 表格单元格合并之类的功能。

寻求您的建议。

【问题讨论】：

标签： javascript html merge

【解决方案1】：

如果您可以自己编写 javascript 代码，那么移除第二个单元格并将第一个单元格的 colspan 增加一个应该很容易。

【讨论】：

好吧，当用户选择两个靠近的单元格时，我可以做到这一点。但是，当这些单元格不靠近时，即用户选择第一行/第一列的单元格并选择另一个单元格的第二行/第三列然后尝试合并，会发生什么？不可能合并吧？我怎样才能检测到那种操作系统情况？
您可以通过nextSibling 或jQuery 的选择器检查您的单元格的邻居。如果有问题的单元格不在同一行，只需取消操作..

【解决方案2】：

如果我理解正确的话。
在 html 中称为 colspan 和 rowspan。有关使用 jQuery 的示例代码，请参阅此 link。

【讨论】：

链接中不清楚。最好了解使用或不使用纯 JavaScript 代码的技术。

【解决方案3】：

此示例将在 4x4 表格中显示 16 个单元格，如果您单击两个或多个单元格，然后单击合并按钮，则会将单元格内容合并到最早的单元格中。使用老式 javascript（根据问题标签）完成，但很容易转换为 jquery。

在 Firefox 中测试，但应该可以在大多数现代浏览器中使用。

这是你想要做的吗？

<html>
<head>
<title>Test Merge</title>
<style type="text/css">
td {border: solid 1px black; background:gray; padding:5px; margin:10px; }
</style>
</head>
<body>

<table>
<tr>
<td id="cell-1-1" onclick="merge(this);">a</td>
<td id="cell-1-2" onclick="merge(this);">b</td>
<td id="cell-1-3" onclick="merge(this);">c</td>
<td id="cell-1-4" onclick="merge(this);">d</td>
</tr>
<tr>
<td id="cell-2-1" onclick="merge(this);">e</td>
<td id="cell-2-2" onclick="merge(this);">f</td>
<td id="cell-2-3" onclick="merge(this);">g</td>
<td id="cell-2-4" onclick="merge(this);">h</td>
</tr>
<tr>
<td id="cell-3-1" onclick="merge(this);">i</td>
<td id="cell-3-2" onclick="merge(this);">j</td>
<td id="cell-3-3" onclick="merge(this);">k</td>
<td id="cell-3-4" onclick="merge(this);">l</td>
</tr>
<tr>
<td id="cell-4-1" onclick="merge(this);">m</td>
<td id="cell-4-2" onclick="merge(this);">n</td>
<td id="cell-4-3" onclick="merge(this);">o</td>
<td id="cell-4-4" onclick="merge(this);">p</td>
</tr>
</table>
<input type="button" id="merge" value="merge" onclick="mergeHighlighted();" />

</body>

</html>

<script language="javascript" type="text/javascript">
    function merge(o) {
        o.style.backgroundColor = "red";        
    }

    function mergeHighlighted() {
        var tds = document.getElementsByTagName("td");
        var firstCellId = "";
        var mergedCells = "";
        for (var i = 0; i < tds.length; i++) {
            if (tds[i].style.backgroundColor == "red") {
                mergedCells += tds[i].textContent;
                if (firstCellId == "") {
                    firstCellId = tds[i].id;
                }
                else {
                    tds[i].style.backgroundColor = "gray";
                    tds[i].style.display = "none";
                    tds[i].textContent = "";
                }
            }
        }
        var firstCell = document.getElementById(firstCellId);
        firstCell.textContent = mergedCells;
        firstCell.style.backgroundColor = "gray";
    }
</script>

【讨论】：

感谢您的代码。它在 IE8/IE7 中不起作用。我没有在 IE6 中测试。由于 IE 不支持“textContent”，它可能在 IE6 中也不起作用。此外，在 Firefox 中，当用户选择相距较远的两个单元格时，合并会产生不需要的结果。但是，我已经投票支持您的善意努力。
@Hoque 经过进一步的投票，我被提醒了这个问题。在进一步测试中，它适用于 MS Edge、Chrome、Firefox - 但不适用于 IE。已经 8 年了，但我可能会修复它！

【解决方案4】：

您可以使用Table.js，这是我编写的一个独立的 JavaScript 库，用于操作复杂的表格。你可以使用这样的东西：

var mytable = new Table(document.getElementById('mytable')),
    cell1 = document.getElementById('cell1'),
    cell2 = document.getElementById('cell2');
 mytable.merge([cell1, cell2], function(colspan, rowspan, newcell, oldcell){
    // colspan is the future value of the "colSpan" attribute of newcell
    // rowspan is the future value of the "rowSpan" attribute of newcell
    // newcell is the cell that is kept
    // oldcell is the cell that will be removed
    // Do what you want here
});

函数的第一个参数是HTMLTableCellElement 中的Array（<TD> 或<TH> 元素）或NodeList。第二个参数是可选的，是一个回调，每当两个单元格合并在一起时都会调用它。

默认情况下，当调用<TableObject>.merge() 时，Table.js 被限制为 50 次合并。你可以改变这个

window.Table.maxIteration = 100;

你也可以使用类似的函数<TableObject>.mergeHorizontal(cells, callback)和<TableObject>.mergeVertical(cells, callback)。

【讨论】：

JDMcreator,没有库还有其他可能的方法吗？