'jquery-tablemanager' is a jquery-plugin, that allows you to show and hide columns and rows in a HTML-table. It is used with 'jquery-1.7.1'.
To use the plugin, the table needs a proper layout. Every table needs a proper thead and tbody-element. The thead-element must have only th-elements as child-nodes. A th used in the scope of a row must have a linear alignment throughout the table. Every Text-Node has to be included in a p or a span-element.
Attach the tablemanager to a table, by giving it the class 'tablemanager'. To initialize the plugin, call $.fn.tablemanager(tab, opts) for each table tab, like shown below.
HTML
<table class="tablemanager">
<thead>
<tr>
<th>...</th>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>
<th>...</th>
<td>...</td>
...
</tr>
</tbody>
...
</table>
JS
$(document).ready(function(){
$('table.tablemanager').each(function() {
$.fn.tablemanager($(this), {mincols: 5});
});
});
A triggerable column is activated, by giving the corresponding th-item the class 'tablemanager-collapsible'
A row can also be activated, by givnig its th-Elements the class 'tablemanager-collapsible'
<table class="tablemanager">
<thead>
<tr>
<th class="tablemanager-collapsible">...</th>
<th class="tablemanager-collapsible">...</th>
...
</tr>
</thead>
...
</table>
2nd th |
3rd th |
4th th |
5th th |
6th th |
|
|---|---|---|---|---|---|
| th 1 | td 1, 1 | td 1, 2 | td 1, 3 | td 1, 4 | td 1, 5 |
| th 2 | td 2, 1 | td 2, 2 | td 2, 3 | td 2, 4 | td 2, 5 |
| th 3 | td 3, 1 | td 3, 2 | td 3, 3 | td 3, 4 | td 3, 5 |
| th 4 | td 4, 1 | td 4, 2 | td 4, 3 | td 4, 4 | td 4, 5 |
| th 5 | td 5, 1 | td 5, 2 | td 5, 3 | td 5, 4 | td 5, 5 |
| th 6 | td 6, 1 | td 6, 2 | td 6, 3 | td 6, 4 | td 6, 5 |
Columns and rows can be grouped by the 'colspan' and 'rowspan' attribute.
A row can also be indirect activated, by giving its th-Elements the class 'tablemanager-inherited'
<table class="tablemanager">
<...>
<thead>
<tr>
<th colspan="3" class="tablemanager-collapsible">...</th>
<th colspan="3" class="tablemanager-collapsible">...</th>
...
</tr>
</thead>
<tbody>
<tr>
<th class="tablemanager-collapsible">...</th>
<th class="tablemanager-inherited">...</th>
...
</tr>
</thead>
...
</table>
Category 1 |
Category 2 |
||||
|---|---|---|---|---|---|
| Sub Categories | C1.1 |
C1.2 |
C1.3 |
C2.1 |
C2.2 |
| Property: 1 | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 |
| Property: 2 | 0.7213 | 0.6213 | 0.3211 | 0.1213 | 0.09821 |
| Property: 3 | 0.9221 | 0.7458 | 0.5921 | 0.4211 | 0.3211 |
| Property: 4 | |||||
| (inherited) 4 A | 0.9876 | 0.7654 | 0.6532 | 0.5432 | 0.4533 |
| (inherited) 4 B | 0.9753 | 0.8511 | 0.7210 | 0.5897 | 0.4242 |
| Property: 5 | 0.7842 | 0.6631 | 0.6322 | 0.2124 | 0.1234 |
A example with text-data.
Category 1 |
Category 2 |
||||
|---|---|---|---|---|---|
C1.1 |
C1.2 |
C1.3 |
C2.1 |
C2.2 |
|
| Property: 1 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, et dolore magna aliquyam erat, sed diam voluptua. At | At vero eos et accusam et justo duo dolores et ea rebum. no sea | Sed diam nonumy eirmod voluptua. At vero eosdolores et ea rebum. | Stet clita kasd gubergren, no dolor sit amet. | Ut wisi enim adnostrud exerci suscipit |
| Property: 2 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse | Nostrud exerci ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in odio dignissim qui praesent | Ut wisi enim ad minim veniam, et iusto odio dignissim qui blandit praesent | ...*) | Duis autem vel, illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent |
| 2 A | et iusto odio dignissim qui blandit praesent | enim ad minim veniam, quis nostrud exerci | wisi enim ad minim veniam, quis nostrud, quis nostrud exerci | Duis autem vel eum iriure dolor | lobortis nisl ut aliquip ex |
| 2 B | ... see Annex A | ... see Annex B | ... see Annex C | ... see Annex D | ...*) |
| Property: 3 | Labore et dolore magna aliquyam Lorem invidunt ut labore et dolore dolores et ea rebum. | Stet gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | Duis exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. | At vero elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna | Lorem ipsum dolor sit amet |
| Footnotes | *) Lorem ipsum dolor sit amet... |
||||
A complex example.
Data |
Property-Group 1 |
Property-Group 2 |
||||
|---|---|---|---|---|---|---|
P1.1 |
P1.2 |
P1.3 |
P2.1 |
P2.2 |
||
| units | mm | mm | % | MPa | m3 | |
| Data-Group 1 | Data 1a | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 |
| Data 1b | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 | |
| Data 1c | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 | |
| Data-Group 2 | Data 2a | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 |
| Data 2b | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 | |
| Data 2c | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 | |
| Data-Group 3 | Data 3a | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 |
| Data 3b | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 | |
| Data 3c | 0.9271 | 0.8932 | 0.6312 | 0.5213 | 0.4821 | |