使用Javascript合并单元格

我有谷歌合并+单元格+ Javascript，但没有找到任何合适的代码来实现表中的合并单元格。使用Javascript合并单元格

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

寻找您的建议。

2010-03-04 Hoque

如果你自己可以用JavaScript编写代码，它应该很容易，因为删除第二个单元格并将第一个单元格增加一个。

2010-03-04 11:17:35 raveren

嗯，我可以做到这一点，当用户选择两个靠近在一起的细胞。但是，当这些单元格不接近时，即用户选择第一行/第一列的单元格并选择另一单元格第二行/第三列，然后尝试合并时，会发生什么？这是不可能的合并，对吧？我如何检测到这种情况？ – Hoque 2010-03-04 11:28:24

你可以通过'nextSibling'或jQuery的选择器来检查你的单元格的邻居。如果有问题的单元格不在同一行中，只需取消操作。 – raveren 2010-03-04 17:44:40

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

来源

2010-03-04 11:20:02

从链接中不清楚。了解使用或不使用纯JavaScript代码的技术会更好。 – Hoque 2010-03-04 11:31:17

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

来源

2010-03-04 13:13:33 amelvin

感谢您的代码。它在IE8/IE7中不起作用。我没有在IE6中测试。可能它也不能在IE6中工作，因为IE不支持“textContent”。此外，在Firefox中，当用户选择两个相隔很远的单元格时，合并会产生不需要的结果。但是我已经投票赞成你的努力。 – Hoque 2010-03-05 00:18:28

您可以使用我编写的用于处理复杂表格的独立JavaScript库Table.js。您可以使用这样的事情：

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（<TD>或<TH>元素）或NodeList的Array。第二个参数是可选的，并且是在两个单元格合并在一起时调用的回调函数。

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

window.Table.maxIteration = 100;

改变这个你也可以用类似的功能<TableObject>.mergeHorizontal(cells, callback)和<TableObject>.mergeVertical(cells, callback)。

来源

2017-10-04 18:37:25 JDMCreator

使用Javascript合并单元格

回答

相关问题