Merge cells using Javascript
Question
I have Googled merge+cell+Javascript but did not find any suitable code to implement merge cells in a table.
Is there any guideline by which I can make a feature like MS-WORD Table Cell Merge using Javascript.
Looking for your advice.
4 answers
solution1
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. Done in old fashioned javascript (as per question tag) but easily converted into jquery.
Tested in Firefox, but should work in most modern browsers.
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>
solution2
3 2017-10-04 18:37:25
You can use Table.js , a standalone JavaScript library I wrote to manipulate complex tables. 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 . 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. You can change this with
window.Table.maxIteration = 100;
You can also use similar functions <TableObject>.mergeHorizontal(cells, callback) and <TableObject>.mergeVertical(cells, callback) .
solution3
2 ACCPTED 2010-03-04 11:17:35
如果您可以自己用JavaScript编写代码，那么删除第二个单元格并将第一个单元格的colspan增加一个应该很容易。
solution4
1 2010-03-04 11:20:02
If I understand right.
In html It is called colspan and rowspan. See this link for sample code using jQuery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.