https://www.hyugacity.jp/reiki_new/js/webkit.scrollabletable.js

1/**
2*
3*  Scrollable HTML table
4*  http://www.webtoolkit.info/
5*
6**/
7
8function ScrollableTable (tableEl, tableHeight, tableWidth) {
9
10	this.initIEengine = function () {
11
12		this.containerEl.style.overflowY = 'auto';
13		if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
14			this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
15		} else {
16			this.containerEl.style.overflowY = 'hidden';
17			this.tableEl.style.width = this.newWidth +'px';
18		}
19
20		if (this.thead) {
21			var trs = this.thead.getElementsByTagName('tr');
22			for (x=0; x<trs.length; x++) {
23				trs[x].style.position ='relative';
24				trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
25			}
26		}
27
28		if (this.tfoot) {
29			var trs = this.tfoot.getElementsByTagName('tr');
30			for (x=0; x<trs.length; x++) {
31				trs[x].style.position ='relative';
32				trs[x].style.setExpression("bottom",  "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
33			}
34		}
35
36		if (!this.tableEl.id) {
37			this.tableEl.id = 'id' + Math.floor(Math.random()*1000);
38		}
39		eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
40	};
41
42
43	this.initFFengine = function () {
44		this.containerEl.style.overflow = 'hidden';
45		this.tableEl.style.width = this.newWidth + 'px';
46
47		var headHeight = (this.thead) ? this.thead.clientHeight : 0;
48		var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
49		var bodyHeight = this.tbody.clientHeight;
50		var trs = this.tbody.getElementsByTagName('tr');
51		if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
52			this.tbody.style.overflow = '-moz-scrollbars-vertical';
53			for (x=0; x<trs.length; x++) {
54				var tds = trs[x].getElementsByTagName('td');
55				tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
56			}
57		var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
58		this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
59		} else {
60			this.tbody.style.overflow = '-moz-scrollbars-none';
61		}
62
63
64	};
65
66	this.tableEl = tableEl;
67	this.scrollWidth = 17;
68
69	this.originalHeight = this.tableEl.clientHeight;
70	this.originalWidth = this.tableEl.clientWidth;
71
72	this.newHeight = parseInt(tableHeight);
73	this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;
74
75	this.tableEl.style.height = 'auto';
76	this.tableEl.removeAttribute('height');
77
78	this.containerEl = this.tableEl.parentNode.insertBefore($('<div class="cc-scrollable"></div>').get(0), this.tableEl);
79	this.containerEl.appendChild(this.tableEl);
80	this.containerEl.style.height = this.newHeight + 'px';
81	this.containerEl.style.width = this.newWidth + 'px';
82
83
84	var thead = this.tableEl.getElementsByTagName('thead');
85	this.thead = (thead[0]) ? thead[0] : null;
86
87	var tfoot = this.tableEl.getElementsByTagName('tfoot');
88	this.tfoot = (tfoot[0]) ? tfoot[0] : null;
89
90	var tbody = this.tableEl.getElementsByTagName('tbody');
91	this.tbody = (tbody[0]) ? tbody[0] : null;
92
93	if (!this.tbody) return;
94
95	if (document.all && document.getElementById && !window.opera) this.initIEengine();
96	if (!document.all && document.getElementById && !window.opera) this.initFFengine();
97
98
99}
100