Merge cells using Javascript
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 ad开发者_如何学JAVAvice.
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>
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).
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.
加载中,请稍侯......
精彩评论