使用Java合并单元格
[英]Merge cells using Javascript
问题描述
I have Googled merge+cell+Javascript but did not find any suitable code to implement merge cells in a table. 
我有Googled merge + cell + Javascript，但是没有找到任何合适的代码来实现表中的合并单元格。
Is there any guideline by which I can make a feature like MS-WORD Table Cell Merge using Javascript. 是否有任何指南可以使我使用Javascript制作诸如MS-WORD表单元格合并之类的功能。
Looking for your advice. 寻找您的建议。
4 个解决方案
解决方案1
3 2010-03-04 13:13:33
This example will display 16 cells in a 4x4 table, if you click on two or more cells and then click the merge button it will merge the cell contents into the earliest cell. 此示例将在4x4表中显示16个单元格，如果单击两个或多个单元格，然后单击合并按钮，它将把单元格内容合并到最早的单元格中。 Done in old fashioned javascript (as per question tag) but easily converted into jquery. 做过老式的javascript（根据问题标签），但很容易转换为jquery。
Tested in Firefox, but should work in most modern browsers. 在Firefox中进行了测试，但应该可以在大多数现代浏览器中使用。
Is this what you're looking to do? 这是您要做什么？
<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>
解决方案2
3 2017-10-04 18:37:25
You can use Table.js , a standalone JavaScript library I wrote to manipulate complex tables. 您可以使用Table.js （我编写的独立JavaScript库）来处理复杂的表格。 You can use something like this : 您可以使用如下所示的内容：
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
});
The first argument of the function is an Array of HTMLTableCellElement ( <TD> or <TH> elements) or a NodeList . 该函数的第一个参数是HTMLTableCellElement Array （ <TD>或<TH>元素）或NodeList 。 The second argument is optional and is a callback that is called whenever two cells are merged together. 第二个参数是可选的，并且是将两个单元格合并在一起时调用的回调。
By default, Table.js is limited to 50 merges when <TableObject>.merge() is called. 默认情况下，调用<TableObject>.merge()时，Table.js被限制为50个合并。 You can change this with 您可以使用
window.Table.maxIteration = 100;
You can also use similar functions <TableObject>.mergeHorizontal(cells, callback) and <TableObject>.mergeVertical(cells, callback) . 您还可以使用类似的函数<TableObject>.mergeHorizontal(cells, callback)和<TableObject>.mergeVertical(cells, callback) 。
解决方案3
2 已采纳 2010-03-04 11:17:35
如果您可以自己用JavaScript编写代码，那么删除第二个单元格并将第一个单元格的colspan增加一个应该很容易。
解决方案4
1 2010-03-04 11:20:02
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.