1 |
1582
|
Luisehahne
|
/**
|
2 |
|
|
*
|
3 |
|
|
* Scrollable HTML table
|
4 |
|
|
* http://www.webtoolkit.info/
|
5 |
|
|
* for Chrome, Safari, Opera
|
6 |
|
|
* http://s7u.blogspot.com/
|
7 |
|
|
**/
|
8 |
|
|
|
9 |
|
|
function ScrollableTable (tableEl, tableHeight, tableWidth) {
|
10 |
|
|
tableHeight = tableHeight * screen.height * 0.01;
|
11 |
|
|
this.initIEengine = function () {
|
12 |
|
|
|
13 |
|
|
this.containerEl.style.overflowY = 'auto';
|
14 |
|
|
if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
|
15 |
|
|
this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
|
16 |
|
|
} else {
|
17 |
|
|
this.containerEl.style.overflowY = 'auto';
|
18 |
|
|
this.containerEl.style.overflowX = 'hidden';
|
19 |
|
|
this.tableEl.style.width = this.newWidth +'px';
|
20 |
|
|
}
|
21 |
|
|
|
22 |
|
|
if (this.thead) {
|
23 |
|
|
var trs = this.thead.getElementsByTagName('tr');
|
24 |
|
|
for (x=0; x < trs.length; x++) {
|
25 |
|
|
trs[x].style.position ='relative';
|
26 |
|
|
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
|
27 |
|
|
}
|
28 |
|
|
}
|
29 |
|
|
|
30 |
|
|
if (this.tfoot) {
|
31 |
|
|
var trs = this.tfoot.getElementsByTagName('tr');
|
32 |
|
|
for (x=0; x < trs.length; x++) {
|
33 |
|
|
trs[x].style.position ='relative';
|
34 |
|
|
trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
|
35 |
|
|
}
|
36 |
|
|
}
|
37 |
|
|
|
38 |
|
|
eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
|
39 |
|
|
};
|
40 |
|
|
|
41 |
|
|
|
42 |
|
|
this.initFFengine = function () {
|
43 |
|
|
this.containerEl.style.overflow = 'hidden';
|
44 |
|
|
this.tableEl.style.width = this.newWidth + 'px';
|
45 |
|
|
var headHeight = (this.thead) ? this.thead.clientHeight : 0;
|
46 |
|
|
var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
|
47 |
|
|
|
48 |
|
|
|
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 = 'scroll';
|
53 |
|
|
}
|
54 |
|
|
else {
|
55 |
|
|
this.tbody.style.overflow = 'auto';
|
56 |
|
|
}
|
57 |
|
|
/*
|
58 |
|
|
Chrome is built on Mozilla. Some script to assign width for tables dynamically.
|
59 |
|
|
*/
|
60 |
|
|
var isChrome = (navigator.userAgent.toUpperCase().indexOf('MOZILLA')> -1 || navigator.userAgent.toUpperCase().indexOf('OPERA')> -1);
|
61 |
|
|
|
62 |
|
|
if(isChrome){
|
63 |
|
|
this.thead.style.display ="inline-block";
|
64 |
|
|
this.tfoot.style.display ="inline-block";
|
65 |
|
|
this.tbody.style.display ="inline-block";
|
66 |
|
|
this.tbody.style.overflow ="auto";
|
67 |
|
|
|
68 |
|
|
|
69 |
|
|
var count = trs[0].getElementsByTagName('th').length || trs[0].getElementsByTagName('td').length;
|
70 |
|
|
var colArray = new Array(count);
|
71 |
|
|
|
72 |
|
|
/*Thead*/
|
73 |
|
|
trs = this.tableEl.getElementsByTagName('tr');
|
74 |
|
|
for(var i=0; i < trs.length ; i++ ){
|
75 |
|
|
var cols = trs[i].getElementsByTagName('th') || trs[i].getElementsByTagName('td');
|
76 |
|
|
for(var j=0; j < cols.length ; j++){
|
77 |
|
|
if(colArray[j]==null || colArray[j] < cols[j].clientWidth){
|
78 |
|
|
colArray[j] =cols[j].clientWidth;
|
79 |
|
|
}
|
80 |
|
|
}
|
81 |
|
|
}
|
82 |
|
|
|
83 |
|
|
var sumArray=0;
|
84 |
|
|
for(i =0; i < colArray.length; i++){
|
85 |
|
|
sumArray += colArray[i];
|
86 |
|
|
}
|
87 |
|
|
|
88 |
|
|
/* if the width of any cell is greater */
|
89 |
|
|
if (sumArray < (this.newWidth - this.scrollWidth)){
|
90 |
|
|
var newCount =0;
|
91 |
|
|
var nWidth =0;
|
92 |
|
|
for(i =0; i < colArray.length; i++){
|
93 |
|
|
var wid = (this.newWidth - this.scrollWidth)/count;
|
94 |
|
|
if(wid < colArray[i]){
|
95 |
|
|
newCount++;
|
96 |
|
|
nWidth += colArray[i];
|
97 |
|
|
}
|
98 |
|
|
}
|
99 |
|
|
var newWid = ((this.newWidth - this.scrollWidth) - nWidth)/(count-newCount);
|
100 |
|
|
for(i =0; i < colArray.length; i++){
|
101 |
|
|
var wid = (this.newWidth - this.scrollWidth)/count;
|
102 |
|
|
if(wid >= colArray[i]){
|
103 |
|
|
colArray[i]= newWid;
|
104 |
|
|
}
|
105 |
|
|
}
|
106 |
|
|
}
|
107 |
|
|
|
108 |
|
|
/*Thead */
|
109 |
|
|
trs = this.thead.getElementsByTagName('tr');
|
110 |
|
|
for(var i=0; i < trs.length ; i++ ){
|
111 |
|
|
var cols = trs[i].getElementsByTagName('th')||trs[i].getElementsByTagName('td');
|
112 |
|
|
for(var j=0; j < cols.length ; j++){
|
113 |
|
|
cols[j].style.width = colArray[j] + 'px';
|
114 |
|
|
}
|
115 |
|
|
var tcell1 = trs[i].insertCell(cols.length);
|
116 |
|
|
tcell1.setAttribute("width", this.scrollWidth -2 +'px' );
|
117 |
|
|
}
|
118 |
|
|
/*Tbody */
|
119 |
|
|
trs = this.tbody.getElementsByTagName('tr');
|
120 |
|
|
for(var i=0; i < trs.length ; i++ ){
|
121 |
|
|
var cols = trs[i].getElementsByTagName('td');
|
122 |
|
|
for(var j=0; j < cols.length ; j++){
|
123 |
|
|
cols[j].style.width = colArray[j] + 'px';
|
124 |
|
|
}
|
125 |
|
|
}
|
126 |
|
|
/*Tfoot */
|
127 |
|
|
trs = this.tfoot.getElementsByTagName('tr');
|
128 |
|
|
for(var i=0; i < trs.length ; i++ ){
|
129 |
|
|
var cols = trs[i].getElementsByTagName('th')||trs[i].getElementsByTagName('td');
|
130 |
|
|
for(var j=0; j < cols.length ; j++){
|
131 |
|
|
cols[j].style.width = colArray[j] + 'px';
|
132 |
|
|
}
|
133 |
|
|
var tcell1 = trs[i].insertCell(cols.length);
|
134 |
|
|
tcell1.setAttribute("width", this.scrollWidth -2 +'px');
|
135 |
|
|
}
|
136 |
|
|
|
137 |
|
|
}
|
138 |
|
|
else{ // else block is for Firefox
|
139 |
|
|
trs = this.tbody.getElementsByTagName('tr');
|
140 |
|
|
for (x=0; x < trs.length; x++) {
|
141 |
|
|
var tds = trs[x].getElementsByTagName('td');
|
142 |
|
|
tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
|
143 |
|
|
}
|
144 |
|
|
|
145 |
|
|
}
|
146 |
|
|
|
147 |
|
|
var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
|
148 |
|
|
this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
|
149 |
|
|
|
150 |
|
|
};
|
151 |
|
|
|
152 |
|
|
this.tableEl = tableEl;
|
153 |
|
|
this.scrollWidth = 16;
|
154 |
|
|
|
155 |
|
|
this.originalHeight = this.tableEl.clientHeight;
|
156 |
|
|
this.originalWidth = this.tableEl.clientWidth;
|
157 |
|
|
|
158 |
|
|
this.newHeight = parseInt(tableHeight);
|
159 |
|
|
this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;
|
160 |
|
|
|
161 |
|
|
this.tableEl.style.height = 'auto';
|
162 |
|
|
this.tableEl.removeAttribute('height');
|
163 |
|
|
|
164 |
|
|
this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
|
165 |
|
|
this.containerEl.appendChild(this.tableEl);
|
166 |
|
|
this.containerEl.style.height = this.newHeight + 'px';
|
167 |
|
|
this.containerEl.style.width = this.newWidth + 'px';
|
168 |
|
|
|
169 |
|
|
|
170 |
|
|
var thead = this.tableEl.getElementsByTagName('thead');
|
171 |
|
|
this.thead = (thead[0]) ? thead[0] : null;
|
172 |
|
|
|
173 |
|
|
var tfoot = this.tableEl.getElementsByTagName('tfoot');
|
174 |
|
|
this.tfoot = (tfoot[0]) ? tfoot[0] : null;
|
175 |
|
|
|
176 |
|
|
var tbody = this.tableEl.getElementsByTagName('tbody');
|
177 |
|
|
this.tbody = (tbody[0]) ? tbody[0] : null;
|
178 |
|
|
|
179 |
|
|
if (!this.tbody) return;
|
180 |
|
|
this.containerEl.style.overflow = 'auto';
|
181 |
|
|
|
182 |
|
|
if (document.all && document.getElementById && !window.opera) this.initIEengine();
|
183 |
|
|
if (!document.all && document.getElementById ) this.initFFengine();
|
184 |
|
|
|
185 |
|
|
|
186 |
|
|
}
|