Merge Cells

I don't often publish partial solutions but in this particular case the code illustrates quite a few features of JavaScript even though the code doesn't cover all possibilities.

It might seem at first glance that using JavaScript to merge two or more cells in an HTML table together would be relatively straightforward. When you are looking at a table consisting of all separate cells and merging just the first couple it is as straightforward as it looks. When there are a number of cells already merged then the positions of the cells in the table may no longer align numerically between rows and columns making it far more difficult to tell if the cells to be merged are actually next to one another.

Let's start by ignoring the problem that we get once cells have been merged with matching the cells up and consider some code that will merge the cells together based on the cells actually being in the position you'd expect if both rows or columns contain the same number of cells. This situation will always be true provided that we start with a table containing all single cells and start merging the cells from the bottom right corner.

Here's a live example of the script with this assumption applied. Click on the cells to turn the border red and when two cells are presumed to be adjacent they will be merged.


The script that performs these merges is as follows:

Example Page

Now the above code only merges the actual cell content, it doesn't try to merge the cell attributes and in fact it will overwrite any classes attached to the cells in marking which have been selected to be merged. These issues can be easily overcome by making small changes to the code depending on exactly which attributes you want to merge. I haven't made these changes because of the bigger problem that this code still has which is not as easily solved, determining which cells are actually adjacent when there are other merged cells throwing off the row or column count.

Consider the following where two pairs of cells have already been merged.

Now as we can see cells G and K are adjacent to one another and so should be able to be merged but the script as written does not allow them to be merged as cell G is position 1,2 and cell K is position 2,1 and so with the code overlooking that cell 2,0 is two cells wide it doesn't recognise that these cells are adjacent Instead of the code treating G and K as adjacent it treats F and K as being adjacent as these cells are position 1,1 and 2,1. The code therefore allows these two cells to be merged with the following confusing result.

We now have two cells in the bottom row overlapping on top of one another in the second column and no cell at all in the third column (as there are already three cells to the left of this position).

To fix this the code in the merge function needs a significant rewrite so that instead of simply adding one to the current position to look for the adjacent cell that it actually works out from the other cells in the relevant rows or columns as to which cells actually are adjacent.

I may return to this script at some point if I can work out an efficient way of checking properly for adjacent cells for merging. If you have any ideas on this I would like to hear from you.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow