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.
Thanks.
+1
A:
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.
Raveren
2010-03-04 11:17:35
Well, I can do that when user choose two cells which are close together. However, when those cells are not closer i.e. user select a cell of first row/first column and select another cell 2nd row/3rd column and then try to merge, what will happen? It is not possible to merge, right? How can i detect that kind os situation?
Hoque
2010-03-04 11:28:24
You can check the neighbors of your cell via `nextSibling` or jQuery's selectors. If the cells in question are not in the same row, just cancel the action..
Raveren
2010-03-04 17:44:40
A:
If I understand right.
In html It is called colspan and rowspan. See this link for sample code using jQuery.
Sergey Mirvoda
2010-03-04 11:20:02
Not clear from the link. It is better to know the technique with or without plain javascript code.
Hoque
2010-03-04 11:31:17
+1
A:
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>
amelvin
2010-03-04 13:13:33
Thanks for your code. It does not work in IE8/IE7.I did not test in IE6. Probably it will also not work in IE6 because of "textContent" which is not supported by IE.Moreover, in Firefox when user choose two cells far apart, the merge gives unwanted result.However I have voted you up for your kind effort.
Hoque
2010-03-05 00:18:28