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.
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.
Share Improve this question edited May 23, 2017 at 19:49 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Mar 4, 2010 at 11:14 NazmulNazmul 7,21812 gold badges53 silver badges64 bronze badges4 Answers
Reset to default 4This 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>
You can use Table.js, a standalone JavaScript library I wrote to manipulate plex 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).
If you can code in javascript yourself, it should be easy as removing the second cell and increasing the first one's colspan by one.
If I understand right.
In html It is called colspan and rowspan. See this link for sample code using jQuery.