FilesExpand file tree

 master

/

stacktable.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

executable file

·

118 lines (107 loc) · 4.3 KB

 master

/

stacktable.js

Copy path

Top

File metadata and controls

• Code
• Blame

executable file

·

118 lines (107 loc) · 4.3 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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) {

markup += '<tr>';

// 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));