Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Normalize" HTML table with rowspan

Is there a way to determine or calculate if and how a HTML table can be normalized using rowspans? Or if there is a JavaScript library that can do it.

E.g., this table:

+-----------+---------+
| Apple     | Red     |
| Apple     | Green   |
| Apple     | Yellow  |
| Sun       | Yellow  |
| Sun       | Hot     |
| Charizard | Hot     |
| Charizard | Pokémon |
+-----------+---------+

Would be turned into this:

+-----------+---------+
| Apple     | Red     |
|           | Green   |
|           |---------|
|-----------| Yellow  |
| Sun       |-------- |
|-----------| Hot     |
|           |---------|
| Charizard | Pokémon |
+-----------+---------+

Look at this fiddle to see what I mean: http://jsfiddle.net/scorch/LZKkQ/

Some of these combinations are easy to figure out manually, but some can be quite complex. I would like to minimize the table as much as possible, and be sure that there is no other combination that could minimize it further. I.e., preferably only unique values in the table.

EDIT: Never mind the extra column in the fiddle. Seems Firefox has some problems with rowspan on the right-most column, so I had to add another one for it to have the desired effect.

EDIT 2:

The DataTables plugin fnMultiRowspan and fnFakeRowspan mentioned below doesn't really get the desired results. Both plugins needs the table to be sorted in the right way beforehand to work; fnFakeRowspan only works on one column and fnMultiRowspan gives the result below (hot and yellow are duplicated in the second column):

+-----------+---------+
|           | Red     |
| Apple     | Green   |
|           | Yellow  |
|-----------+---------|
| Charizard | Hot     |
|           | Pokémon |
|-----------+---------|
| Sun       | Yellow  |
|           | Hot     |
+-----------+---------+
like image 835
Oscar Avatar asked Jun 20 '12 08:06

Oscar


1 Answers

As @MahmoudGamal mentioned above in the comments, there is plug-in for jQuery called DataTables that may be useful. Check out the fnFakeRowspan function:

Creates rowspan cells in a column when there are two or more cells in a row with the same content, effectively grouping them together visually. Note - this plug-in currently only operates correctly with server-side processing.

Based on a quick code read, it looks like you specify a column, then it looks for duplicates, and combines cells as needed. (Note: I have not tried this code myself.)

like image 100
David J. Avatar answered Oct 03 '22 16:10

David J.