我很茫然——我的 Javascript 很糟糕，我试图展示一些基于跨度的面板来保存一些表格。面板只是左侧面板和右侧面板（您在左侧选择一些东西 - 您会在右侧看到一些东西）。我需要使用跨度，因为我让 Ajax 定期重新填充它们。我还需要使用 ID 为 ResizableListTableDiv 的跨度，因为在使用 www.jaimon.co.uk 上的出色 fxHeader javascript 时这是必要的（我已嵌入代码以帮助提取样本）[注意 - 我的版本m using 现在似乎与 jaimon.co.uk 上的版本不完全匹配]
我的面板工作到一定程度，但我发现问题：-
1) 当页面缩放低于 80% 时，或
2）当我调整窗口大小时，或者
3）当我放大和缩小时。
（主要问题是右侧面板在这些事件中翻转到另一个面板下方）。
请注意，到目前为止，我只关注 IE - 关于如何制作任何浏览器的提示也会很好。
PS。我是否需要使用 Javascript 来执行此操作，或者我是否遗漏了某些内容而 html 应该为我执行此操作？
<html>
<head>
<SCRIPT LANGUAGE='JavaScript'>
/*
* @Author Jaimon Mathew www.jaimon.co.uk
* Please see http://jaimonmathew.wordpress.com/2010/03/19/making-scrollable-tables-with-fixed-headers-updated-2/
*/
(function() {
var flag=false;
var tbl=new Array();
this.ge$=function(d) {return document.getElementById(d);};
this.scrollHeader = function(evt) {
if(flag) {
return;
}
var e=evt?evt:window.event;
var t=e.target?e.target:e.srcElement;
if (t.nodeType == 3) {
t = t.parentNode;
}
var tid=t.id.replace(':scroller','');
var fh=ge$(tid+':scroller:fx');
var sd=ge$(tid+':scroller');
fh.style.left=(0-sd.scrollLeft)+'px';
var cf=ge$(tid+'_CFB');
if(cf) {
var dmt=parseInt(cf.getAttribute('dmt'));
cf.style.marginTop=(0-(sd.scrollTop+dmt))+'px';
}
};
function gbw() {
return document.body.offsetWidth?document.body.offsetWidth:window.innerWidth;
}
function addScrollerDivs(tid,noOfCols) {
if(ge$(tid+':scroller')) {
return;
}
var tb=ge$(tid);
var tb2=tb.parentNode;
var ns=tb.nextSibling;
var sd=document.createElement("div");
sd.id=tid+':scroller';
sd.style.cssText = 'height:auto;overflow-x:auto;overflow-y:auto;width:auto;';
sd.onscroll=scrollHeader;
sd.appendChild(tb);
var sd2=document.createElement("div");
sd2.id=tid+':scroller:fx:OuterDiv';
sd2.style.cssText='position:relative;width:auto;overflow:hidden;overflow-x:hidden;padding:0px;margin:0px;';
sd2.innerHTML='<div id="' + tid + ':scroller:fx" style="text-align:left;position:relative;width:9999px;padding:0px;margin-left:0px;"><font size="3" color="red">Please wait while loading the table..</font></div>';
var fc=null;
if(noOfCols > 0) {
fc=document.createElement("div");
fc.id=tid+':scroller:fxcol';
fc.style.cssText='width:0px;height:auto;display:block;float:left;overflow:hidden;';
fc.innerHTML = "<div id='" + tid +":scroller:fxCH' style='width:100%;overflow:hidden;'> </div><div id='" + tid +":scroller:fxCB' style='width:100%;overflow:hidden;'> </div>";
}
if(ns) {
if(fc) tb2.insertBefore(fc, ns);
tb2.insertBefore(sd2, ns);
tb2.insertBefore(sd, ns);
}else {
if(fc) tb2.appendChild(fc);
tb2.appendChild(sd2);
tb2.appendChild(sd);
}
}
this.fxheader = function() {
if(flag) {return;}
flag=true;
var perUsed=false;
for(var i=0;i<tbl.length;i++) {
var tbDiv=ge$(tbl[i].tid);
var w=tbl[i].swidth+'';
if(w.indexOf('%')>=0) {
perUsed=true;
var ttt=ge$(tbl[i].tid+':scroller:fx');
ttt.style.width='0px';
var twi=parseInt(w);
w=(gbw()*twi/100);
ttt.style.width='9999px';
}
//if ie6/7 then allow for 18px scrollbar area
tbDiv.style.width=(parseInt(w-18))+'px';
var fh=ge$(tbl[i].tid + ':scroller:fx');
fh.style.marginLeft='0px';
fh.style.display='';
var cn=fh.childNodes;
var j;
for(j=0;j<cn.length;j++) {
fh.removeChild(cn[j]);
}
var t=tbDiv.cloneNode(false);
t.id=tbl[i].tid+'__cN';
if(document.all) {
t.style.width=tbDiv.offsetWidth+'px';
}else {
t.style.width='auto';
}
t.style.marginTop='0px';
t.style.marginLeft='0px';
var th=document.createElement("thead");
th.style.padding='0px';
th.style.margin='0px';
for(j=0;j<tbl[i].noOfRows;j++) {
var r=tbDiv.rows[j].cloneNode(true);
th.appendChild(r);
}
t.appendChild(th);
fh.appendChild(t);
var t2;
if(tbl[i].noOfCols > 0) {
t2=t.cloneNode(true);
t2.id=tbl[i].tid + '_CFH';
}
//adjusting widths
var tHeight=0;
for(j=0;j<tbl[i].noOfRows;j++) {
//var c=ge$(tbl[i].tid+'__cN').rows[j].cells;
var c=t.rows[j].cells;
var c2;
var oc=tbDiv.rows[j].cells;
var q;
if(t2) {
c2=t2.rows[j].cells;
for(q=0;q<c.length;q++) {
c[q].style.width=c2[q].style.width=(oc[q].offsetWidth-3) + 'px';
}
}else {
for(q=0;q<c.length;q++) {
c[q].style.width=(oc[q].offsetWidth-7) + 'px';
}
}
tHeight+=tbDiv.rows[j].offsetHeight;
}
tbDiv.style.marginTop = "-" + tHeight + "px";
var h=tbl[i].sheight;
if(tbDiv.offsetHeight < h) {
h=tbDiv.offsetHeight+18;
}
var cw=0;
//Column freezing
if(tbl[i].noOfCols > 0) {
for(j=0;j<tbl[i].noOfCols;j++) {
cw+=tbDiv.rows[0].cells[j].offsetWidth;
}
tbDiv.style.marginLeft = "-" + cw + "px";
tbDiv.style.display='block';
fh.style.marginLeft = "-" + cw + "px";
var fxcol=ge$(tbl[i].tid+':scroller:fxcol').style;
fxcol.width=(cw)+'px';
var fxCH=ge$(tbl[i].tid+':scroller:fxCH');
var fxCB=ge$(tbl[i].tid+':scroller:fxCB');
fxCH.innerHTML='';
fxCB.innerHTML='';
fxCH.appendChild(t2);
fxCH.style.height=tHeight+'px';
fxCB.style.height=(h-tHeight)+'px';
var t3=tbDiv.cloneNode(true);
t3.id=tbl[i].tid + '_CFB';
t3.style.marginLeft = "0px";
t3.setAttribute('dmt', tHeight);
fxCB.appendChild(t3);
}
w=(parseInt(w)-cw)+'px';
//alert(i+') '+tbl[i].tid+'...'+h+'-'+tHeight); .. problems occur when h-tHeight go negative
ge$(tbl[i].tid+':scroller').style.height=(h-tHeight) + 'px';
ge$(tbl[i].tid+':scroller').style.width=w;
ge$(tbl[i].tid+':scroller:fx:OuterDiv').style.height=tHeight + 'px';
ge$(tbl[i].tid+':scroller:fx:OuterDiv').style.width=w;
}
//if(perUsed) {
window.onresize=fxheader;
//}
flag=false;
};
this.reInit = function() {
for(t=0; t<tbl.length;t++) {
var _tid0=tbl[t].tid;
var _tid1=tbl[t].tid+":scroller";
var _tid2=tbl[t].tid+":scroller:fx:OuterDiv";
var sheight;
var o=document.getElementById(_tid1);
r=o.offsetTop;
while(o=o.offsetParent)r+=o.offsetTop;
t2=r;
var o2=document.getElementById(_tid1);
r=o2.offsetLeft;
while(o2=o2.offsetParent)r+=o2.offsetLeft;
var l2=r+35;
var htmlwidth = document.body.parentNode.scrollWidth;
var htmlheight = document.body.parentNode.scrollHeight;
var d=document;
var windowwidth = window.innerWidth;
var windowheight = window.innerHeight;
if (typeof window.innerWidth!='undefined') {
windowwidth = window.innerWidth;
windowheight = window.innerHeight;
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
windowwidth = d.documentElement.clientWidth;
windowheight = d.documentElement.clientHeight;
} else {
if (d.body &&
typeof d.body.clientWidth!='undefined') {
windowwidth = d.body.clientWidth;
windowheight = d.body.clientHeight;
}
}
}
if ( htmlheight < windowheight ) {
document.body.height = windowheight;
if ( windowheight>t2) {
sheight=(windowheight-t2);
}
else {
sheight=10;
}
}
else {
document.body.height = htmlheight;
if ( htmlheight>t2) {
sheight= (htmlheight-t2-50);
}
else {
sheight=10;
}
}
if ( sheight > 200 ) {
tbl[t].sheight=sheight;
}
var o2=document.getElementById(_tid0);
var o3=document.getElementById(_tid1);
var o4=document.getElementById(_tid2);
if ( htmlwidth < windowwidth ) {
document.body.width = windowwidth + "px";
//o2.style.width = (windowwidth-l2) + "px";
o3.style.width = (windowwidth-l2) + "px";
if ( o4 != null ) {
o4.style.width = o3.style.width;
}
//ResizableListTableBodyDiv2.style.width = (windowwidth-l2) + "px";
}
else {
document.body.width = htmlwidth + "px";
//o2.style.width = (htmlwidth-l2) + "px";
o3.style.width = (htmlwidth-l2-25) + "px";
if ( o4 != null ) {
o4.style.width = o3.style.width;
}
//ResizableListTableBodyDiv2.style.width = (htmlwidth-l2) + "px";
}
}
};
this.fxheaderInit = function(_tid,_sheight,_noOfRows,_noOfCols) {
var tb = new Object();
var td=ge$(_tid);
tb.tid=_tid;
tb.sheight=_sheight;
if ( _sheight == 0 ) {
var o=document.getElementById(_tid),r=o.offsetTop;
while(o=o.offsetParent)r+=o.offsetTop;
t2=r+30;
var htmlheight = document.body.parentNode.scrollHeight;
var windowheight = window.innerHeight;
if ( htmlheight < windowheight ) {
document.body.height = windowheight;
if ( windowheight>t2) {
tb.sheight=(windowheight-t2);
}
else {
tb.sheight=10;
}
}
else {
document.body.height = htmlheight;
if ( htmlheight>t2) {
tb.sheight= (htmlheight-t2-50);
}
else {
tb.sheight= 10;
}
}
}
tb.swidth=td.width;
if(!tb.swidth || tb.swidth.length==0) {
tb.swidth=td.style.width;
if(!tb.swidth) tb.swidth = '100%';
if(tb.swidth.indexOf('%')==-1) {
tb.swidth = parseInt(tb.swidth);
}
}
tb.noOfRows=_noOfRows;
tb.noOfCols=_noOfCols;
addScrollerDivs(_tid,_noOfCols);
tbl[tbl.length]=tb;
//reInit();
};
})();
</SCRIPT>
<SCRIPT LANGUAGE='JavaScript'>
//-----------------------------------------------------------------------------------------
var tableDone = false;
//-----------------------------------------------------------------------------------------
function resizeListTable0() {
if ( navigator.appName == 'Microsoft Internet Explorer' ) {
resizeListTable(false);
}
}
//-----------------------------------------------------------------------------------------
function getPX(x){ x2=''+x; return x2.replace(/px/, ''); }
//-----------------------------------------------------------------------------------------
function resizeListTable(forceNewTable) {
if ( navigator.appName == 'Microsoft Internet Explorer' ) {
var divObjId = 'ResizableListTableDiv';
var divObj2Id = 'ResizableListTableBodyDiv';
var ResizableListTableDiv = document.getElementById(divObjId);
var ResizableListTableBodyDiv = document.getElementById(divObj2Id);
if ( ResizableListTableBodyDiv != null ) {
var divObjHeight = ResizableListTableDiv.style.height;
var tableWidth = ResizableListTableBodyDiv.style.width;
var numCols = ResizableListTable.firstChild.firstChild.childNodes.length;
var t2=mytop(divObj2Id)+80;
var l2=myleft(divObj2Id)+40;
var htmlwidth = document.body.parentNode.scrollWidth;
var htmlheight = document.body.parentNode.scrollHeight;
var windowwidth = window.innerWidth;
var windowheight = window.innerHeight;
if (forceNewTable || ! tableDone) {
tableDone = true;
}
var d=document;
var windowwidth = window.innerWidth;
var windowheight = window.innerHeight;
if (typeof window.innerWidth!='undefined') {
windowwidth = window.innerWidth;
windowheight = window.innerHeight;
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
windowwidth = d.documentElement.clientWidth;
windowheight = d.documentElement.clientHeight;
} else {
if (d.body &&
typeof d.body.clientWidth!='undefined') {
windowwidth = d.body.clientWidth;
windowheight = d.body.clientHeight;
}
}
}
if ( htmlheight < windowheight ) {
document.body.height = windowheight + "px";
if ( windowheight>t2) {
ResizableListTableBodyDiv.style.height = (windowheight-t2) + "px";
}
else {
ResizableListTableBodyDiv.style.height = "10px";
}
}
else {
document.body.height = htmlheight + "px";
if ( htmlheight>t2) {
ResizableListTableBodyDiv.style.height = (htmlheight-t2) + "px";
}
else {
ResizableListTableBodyDiv.style.height = "10px";
}
}
if ( htmlwidth < windowwidth ) {
document.body.width = windowwidth + "px";
ResizableListTableDiv.style.width = (windowwidth-l2) + "px";
ResizableListTableBodyDiv.style.width = (windowwidth-l2) + "px";
}
else {
if ( htmlwidth < l2 ) {
l2=0;
}
document.body.width = htmlwidth + "px";
ResizableListTableDiv.style.width = (htmlwidth-l2) + "px";
ResizableListTableBodyDiv.style.width = (htmlwidth-l2) + "px";
}
ResizableListTableBodyDiv.onscroll = function (e) {
ResizableListTableDiv.scrollLeft = ResizableListTableBodyDiv.scrollLeft;
};
ResizableListTableBodyDiv.style.display = 'block';
ResizableListTableBodyDiv.style.visibility = 'visible';
}
}
return;
}
//-----------------------------------------------------------------------------------------
function mytop(n){
var o=document.getElementById(n),r=o.offsetTop;
while(o=o.offsetParent)r+=o.offsetTop;
return r;
}
//-----------------------------------------------------------------------------------------
function myleft(n){
var o=document.getElementById(n),r=o.offsetLeft;
while(o=o.offsetParent)r+=o.offsetLeft;
return r;
}
//-----------------------------------------------------------------------------------------
if ( navigator.appName == 'Microsoft Internet Explorer' ) {
if (window.addEventListener) { //DOM method for binding an event
window.addEventListener("load", resizeListTable0(), false);
window.addEventListener("resize", resizeListTable0(), false);
}
else if (window.attachEvent) { //IE exclusive method for binding an event
window.attachEvent("onload", resizeListTable0);
window.attachEvent("onresize", resizeListTable0);
}
else if (document.getElementById) { //support older modern browsers
window.onload=resizeListTable0();
window.resize=resizeListTable0();
}
}
</SCRIPT>
</head>
<body>
<span
style='border: solid 1pt red; margin: 5px 5px 5px 0px; padding: 0px; height: 100%; width: 25%; position: relative; float: left; overflow: auto'>
<table border=0 style='width: 100%;'>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
<tr><td>Hello World</td></tr>
</table>
</span>
<span style='width: 100%; border: blue solid 1pt '>
<hr>
<span id='ResizableListTableDiv'
style='border: solid 1pt green; padding: 0px; margin: 0px; width: 55%; overflow-x: hidden; overflow-y: hidden; height: 100%;'>
</span>
<span id='ResizableListTableBodyDiv'
style='border: solid 1pt orange; padding: 0px; margin: 0px; width: 95%; overflow-x: auto; overflow-y: auto; height: 90%;'>
<table width=1400 id='ResizableListTable' style='padding:0px; margin:0px; border: none;'>
<tr><th width=100>Column 1</th><th width=400>Column 2</th><th width=200>Column 3</th><th width=400>Column 4</th><th width=300>Column 5</th></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</table>
</span>
</span>
</body>