// class FixedHeadTable // requires: prototype.js var FixedHeadTable = Class.create(); /* * The algorithm to adjust the widths of the columns is cited from * the message by "ween" on Feb 5, 2003 in the following page: * http://chaichan.hp.infoseek.co.jp/qa3500/qa3637.htm */ FixedHeadTable.prototype = { initialize: function(tableId, headContainerId, bodyContainerId, heightRatio) { this.tableId = tableId; this.headContainerId = headContainerId; this.bodyContainerId = bodyContainerId; this.heightRatio = heightRatio; }, setup: function() { if (navigator.appVersion.match(/MSIE|KHTML/) && !navigator.userAgent.match(/MSIE.*Mac_PowerPC/)) { $(this.bodyContainerId).style.overflow = "auto"; this.setupElements(); this.setupHeight($(this.bodyContainerId)); this.setupWidth(); } else { this.setupForMozilla(); } }, setupForMozilla: function() { var tbody = $(this.tableId).getElementsByTagName("tbody")[0]; tbody.style.overflow = "auto"; var trs = tbody.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var tds = trs[i].getElementsByTagName("td"); tds[tds.length - 1].style.paddingRight = "20px"; } this.setupHeight(tbody); }, reset: function() { if (navigator.appVersion.match(/MSIE|KHTML/) && !navigator.userAgent.match(/MSIE.*Mac_PowerPC/)) { this.body.rows[0].style.display = ""; var nCols = this.body.rows[0].cells.length; for (var i = 0; i < nCols; i++) { this.body.rows[0].cells[i].style.width = ""; this.body.rows[1].cells[i].style.width = ""; } this.bodyContainer.style.width = "auto"; this.head.style.tableLayout = "auto"; this.body.style.tableLayout = "auto"; this.setupHeight(this.bodyContainer); this.setupWidth(); } else { this.resetForMozilla(); } }, resetForMozilla: function() { this.setupHeight($(this.tableId).getElementsByTagName("tbody")[0]); }, setupElements: function() { this.body = $(this.tableId); this.headContainer = $(this.headContainerId); this.bodyContainer = $(this.bodyContainerId); this.head = this.makeHead(this.body); this.headContainer.appendChild(this.head); }, setupHeight: function(elem) { var windowHeight = window.innerHeight || document.body.offsetHeight; elem.style.height = Math.round(windowHeight * this.heightRatio) + "px"; }, setupWidth: function() { var diff = this.bodyContainer.offsetWidth - this.bodyContainer.scrollWidth; var nCols = this.head.rows[0].cells.length; var tempWidths = new Array(); if (navigator.appVersion.match(/KHTML/)) { this.head.style.width = "98%"; } for (var i = 0; i < nCols; i++) { tempWidths.push(this.body.rows[1].cells[i].offsetWidth); } if (!navigator.appVersion.match(/KHTML/)) { this.head.style.tableLayout = "fixed"; this.body.style.tableLayout = "fixed"; } for (var i = 0; i < nCols; i++) { this.head.rows[0].cells[i].style.width = tempWidths[i]; this.body.rows[0].cells[i].style.width = tempWidths[i]; this.body.rows[1].cells[i].style.width = tempWidths[i]; } this.body.rows[0].style.display = "none"; this.head.rows[0].cells[nCols - 1].width = tempWidths[nCols - 1]; this.bodyContainer.style.width = this.body.offsetWidth + diff; }, makeHead: function(body) { var head = document.createElement("table"); head.id = this.tableId + "Head"; var theads = body.getElementsByTagName("thead"); head.appendChild(theads[0].cloneNode(true)); return head; } }; var fixedHeadTable = new FixedHeadTable("tableBody", "tableHeadContainer", "tableBodyContainer", 0.6); window.onload = function() { fixedHeadTable.setup(); }; window.onresize = function() { fixedHeadTable.reset(); };