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 |
+-----------+---------+
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.)
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