merge adjacent html table cells based on class or value

Question

I have a html table with a variable number of cells. For the sake of this example i will say 20x20 (although it's quite bigger).

This is generated via php and the dataset to populate the table has been pulled from mysql. Each one of these cells has a numeric value, and it needs to specifically be placed where is is. So if cell A(10,15) has a value of 100, that 100 needs to specifically be on 10,15- And while the table is being generated i have no way to analyze the positioning.

Now, many of these cells, have other adjacent cells with the same value. Either horizontally or vertically.

What i need to do is merge adjacent cells of a this table that have the same value. This could be horizontal, vertical, or both, but still keeping it a rectangle- Nothing too funky.

For example if i have

0 1 1 1 0
2 2 5 0 4
5 5 5 1 4

i need to modify the colspan and/or rowspan based on value- To be noted is that upon generation i can actually define classes or ids for each one of these cells. Also during generation i can identify wether there will be more than one in a series in a row, but i have no way of knowing wether there will be one on the row below.

ps: i did do a bit a research and found this thread. Complex table merging javascript & jquery algorithm

modified the jsfiddle example to affect both colspan and rowspan of the cell but it seems to flip out when it needs to merge more that two cells-

What could be a suggested approach on the matter?

Thank you in advance

Answer 1

Do it in two passes (O(n2)), first traverse your array in the width and detect the number of adjacent cells (and set zero for a cell after the same one) :

0(1) 1(3) 1(0) 1(0) 0(1)
2(2) 2(0) 5(1) 0(1) 4(1)
5(3) 5(0) 5(0) 1(1) 4(1)

Then, traverse it vertically, and find cells where both numbers are the same (and the count > 0), you'll get :

0(1,1) 1(3,1) 1(0,0) 1(0,0) 0(1,1)
2(2,1) 2(0,0) 5(1,0) 0(1,1) 4(1,2)
5(3,1) 5(0,0) 5(0,0) 1(1,1) 4(1,0)

Now, the first number of the pair is the colspan, the second is the rowspan. If one of the number is 0, don't output it.

0 1---- 0
2-- 5 0 4
5---- 1 |