Menu
I have a table and I want to change colspan/rowspan property of a cell on runtime. Here is an example:
<html>
<head>
<script type="text/javascript">
function setColSpan() {
document.getElementById('myTable').rows[0].cells[0].colSpan = 2
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="Change colspan">
</form>
</body>
</html>
My problem is that the cells shift. Am I supposed to remove the cells over which the cell in question spans?
I can I do without removing?
I want to implement a simple spreadsheet. For now I managed to be able to select a rectangular range of cells and show a menu with a "Merge selected cells" option. I would like to be able to "unmerge" cells, so it would be good to span cells without having to remove other cells.
478
I think you need to delete the cell. Check with following code. What i did was removed the entire row and added new row with new column span
function setColSpan() {
var table = document.getElementById('myTable');
table.deleteRow(0);
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML= "cell 1"
cell.colSpan = 2
}
The cells shift because that's what you're telling it to do. You're defining a table like this:
<tr>
<td colspan="2">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
So the shift you're seeing is what I would expect.
If you want to merge cells, you would have to take the contents of all the merged cells, concat them into a single cell, and remove the rest. For the trivial example, it'd go like this:
function setColSpan() {
var myTable = document.getElementById('myTable');
var cell2html = myTable.rows[0].cells[1].innerHTML;
myTable.rows[0].deleteCell(1);
myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html;
myTable.rows[0].cells[0].colSpan = 2;
}
However a more robust solution is...kind of complicated. Especially if you want the ability to unmerge. You'd have to preserve the information of the old cell structure somehow...possibly with putting something like <span class="oldCell">cell 2</span> around merged data? And then checking for the existence of "oldCell" spans when unmerging? But then you would have to preserve that information through user edits. And figure out what that means for merging across rows and columns. And also figure out what that means for overlapping merges.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
