forked from johnpolacek/stacktable.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstacktable.js
More file actions
executable file
·118 lines (106 loc) · 4.29 KB
/
Copy pathstacktable.js
File metadata and controls
executable file
·118 lines (106 loc) · 4.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
* stacktable.js
* Author & copyright (c) 2012: John Polacek
* Dual MIT & GPL license
*
* Page: http://johnpolacek.github.com/stacktable.js
* Repo: https://github.com/johnpolacek/stacktable.js/
*
* jQuery plugin for stacking tables on small screens
*
*/
;(function($) {
$.fn.stacktable = function(options) {
var $tables = this,
defaults = {id:'stacktable small-only',hideOriginal:true},
settings = $.extend({}, defaults, options);
return $tables.each(function() {
var $stacktable = $('<table class="'+settings.id+'"><tbody></tbody></table>');
if (typeof settings.myClass !== undefined) $stacktable.addClass(settings.myClass);
var markup = '';
$table = $(this);
$table.addClass('stacktable large-only');
$topRow = $table.find('tr').eq(0);
$table.find('tr').each(function(index,value) {
// for the first row, top left table cell is the head of the table
if (index===0) {
markup += '<tr><th class="st-head-row st-head-row-main" colspan="2">'+$(this).find('th,td').eq(0).html()+'</th></tr>';
}
// for the other rows, put the left table cell as the head for that row
// then iterate through the key/values
else {
$(this).find('td,th').each(function(index,value) {
if (index===0) {
markup += '<tr><th class="st-head-row" colspan="2">'+$(this).html()+'</th></tr>';
} else {
if ($(this).html() !== ''){
markup += '<tr>';
if ($topRow.find('td,th').eq(index).html()){
markup += '<td class="st-key">'+$topRow.find('td,th').eq(index).html()+'</td>';
} else {
markup += '<td class="st-key"></td>';
}
markup += '<td class="st-val">'+$(this).html()+'</td>';
markup += '</tr>';
}
}
});
}
});
$stacktable.append($(markup));
$table.before($stacktable);
if (!settings.hideOriginal) $table.show();
});
};
$.fn.stackcolumns = function(options) {
var $tables = this,
defaults = {id:'stacktable small-only',hideOriginal:true},
settings = $.extend({}, defaults, options);
return $tables.each(function() {
$table = $(this);
var num_cols = $table.find('tr').eq(0).find('td,th').length; //first table <tr> must not contain colspans, or add sum(colspan-1) here.
if(num_cols<3) //stackcolumns has no effect on tables with less than 3 columns
return;
var $stackcolumns = $('<table class="'+settings.id+'"></table>');
if (typeof settings.myClass !== undefined) $stackcolumns.addClass(settings.myClass);
$table.addClass('stacktable large-only');
var tb = $('<tbody></tbody>');
var col_i = 1; //col index starts at 0 -> start copy at second column.
while (col_i<num_cols){
$table.find('tr').each(function(index,value) {
var tem = $('<tr></tr>'); // todo opt. copy styles of $this; todo check if parent is thead or tfoot to handle accordingly
if(index==0) tem.addClass("st-head-row st-head-row-main");
first = $(this).find('td,th').eq(0).clone().addClass("st-key");
var target = col_i;
// if colspan apply, recompute target for second cell.
if ($(this).find("*[colspan]").length) {
var i =0;
$(this).find('td,th').each(function(index,value) {
var cs = $(this).attr("colspan");
if (cs) {
cs = parseInt(cs, 10);
target -= cs-1;
if ((i+cs) > (col_i)) //out of current bounds
target += i + cs - col_i -1;
i += cs;
}
else
i++;
if (i > col_i)
return false; //target is set; break.
});
}
second = $(this).find('td,th').eq(target).clone().addClass("st-val").removeAttr("colspan");
tem.append(first, second);
tb.append(tem);
});
++col_i;
}
$stackcolumns.append($(tb));
$table.before($stackcolumns);
if (!(settings.hideOriginal)) {
$table.show();
}
});
};
}(jQuery));