Question

我已使用Google搜索合并+单元格+ Javascript但未找到任何合适的代码来在表格中实现合并单元格。

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

寻找你的建议。

Answer 1

此示例将在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>

Answer 2

您可以使用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
});

该函数的第一个参数是Array HTMLTableCellElement（<TD>或<TH>元素）或NodeList。第二个参数是可选的，并且只要两个单元格合并在一起就会调用回调。

默认情况下，调用<TableObject>.merge()时，Table.js限制为50次合并。您可以使用

更改此设置

window.Table.maxIteration = 100;

您还可以使用类似的功能<TableObject>.mergeHorizontal(cells, callback)和<TableObject>.mergeVertical(cells, callback)。

Answer 3

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

Answer 4

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

使用Javascript合并单元格

4 个答案: