Complex table merging javascript & jquery algorithm

Question

I have a rather unique problem that I'm having trouble solving. I have a 2 x 3 table, arranged like shown below.

_1____2__
1-|____|____|
2-|____|____|
3-|____|____|

Data is populated into the cells of the table. Sometimes, the data in a column or row can be the same. For example, if (1,1) and (1,2) have the same data. In some cases (1,1), (1,2), and (1,3) can all have the same data. If the values in the cells are the same, and adjacent, they need to be merged. For example, if (1,1) and (1,2) both have a value of "100", the two cells get merged. I've done this manually by using jquery like:

(1,2).hide();
(1,1).attr("rowspan", "2");

I hide the (1,2) cell instead of delete, since the tables can be reset to the original 2x3 and then repopulated if needed. Manually, this works great, but I need a dynamic method. Below is the overall goal of what needs to be accomplished.

If two vertically adjacent cells or three vertically adjacent cells in their respective columns have a values that are equal, then those cells are merged together.
Row cells, like (1,1) and (2,1) can have duplicated data, and are never merged.
For reference, the groups of cells that are compatible to be merged are {(1,1),(1,2)}, {(1,1),(1,2),(1,3)}, {(1,2),(1,3)}, {(2,1),(2,2)}, {(2,1),(2,2),(2,3)}, {(2,2),(2,3)}
Multiple merges can happen at a time. For example: {(1,1),(1,2)} have the same data, and {(2,1),(2,2),(2,3)} have the same data. Both groups are individually merged.

My main question is, how would I go about writing an algorithm to do this, without writing out every possible situation. Can someone show me an example of something that would work? I realize this is complex, so feel free to ask questions for clarification. Thanks so much in advanced. This is a huge help!

Sounds like a job for....Karnaugh Mapping. See en.wikipedia.org/wiki/Karnaugh_map — Diodeus - James MacFarlane
The table is always originally 2 x 3. The merging of the cells can cause the table to become 2 x 2 or 2 x 1. — dremme
Could you separate the data calculation from the presentation? Meaning, wouldn't it be easier to handle the combination checking first, and then draw a table based on the result? — j08691
@diodeus sounds potentially promising theoretically, though I would have no idea how to implement a concept like that. — dremme

georg georg · Accepted Answer · 2012-02-07T19:00:53

Like this? http://jsfiddle.net/4zGvg/ Works with arbitrary rows/cols.

The idea: we have values matrix and span matrix. The values of span are

0 = hide this cell

1 = normal cell

x > 1 = cell with rowspan x

Iterate by columns in direct order and by rows in reverse order. If some cell's value is equal to the value below it, increase this cell's span and delete the span of the below cell:

for (var col = 0; col < cols; col++) {
    for (var row = rows - 2; row >= 0; row--) {
        if (values[row][col] == values[row + 1][col]) {
            span[row][col] = span[row + 1][col] + 1;
            span[row + 1][col] = 0;
        }
    }
}

Once this is done, you can use span to generate the complete table or to show/hide cells and set their rowspan attributes.

Complex table merging javascript & jquery algorithm

2 Answers