已经实现固定多行多列的Table，怎样实现调整列宽，难吗?

BlueDestiny(May Be I am Really never online.) 兄
我的Javascript不是很好，所以请你帮忙做个示例行吗?
特别是由于我的固定列的功能上用了'position: relative;left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
好像对计算会有影响，因为很多提供的例子，对没有这个属性的Table是可行的，有了
这个属性就调整不正确了。
谢谢!

Javascript高手们，能否出来说一下啊，到底能不能做啊?

建议不要用expression：1.非w3c标准，IE only
2.很耗费CPU,用鼠标在页面上晃几下，CPU占用率立马升上去

laochake(老茶客)兄：
能否给小弟出个主意，有办法实现我所要的这个功能吗?就是能固定几行表头几行列，也能调整列宽，能给个例子吗?先谢了!

IE only 的话，用数据岛放数据
去看看上个帖子的例子，研究一下，应该不难

是只要IE支持就行，如果是一个新的功能，我觉得数据岛方式应该能行
但现在的问题是，这个Table之前的同事已实现了很多功能，他的数据源等，
都已确定，而我必须在下周内出结果，没办法全部改造了，难道没有
其它方式处理?

代码我就不写了，网上很多这种htc的自己改改吧。
以下存为grid.html
<TABLE border=1 cellspacing=0 cellpadding=0 style="behavior:url(grid.htc);">
<TR>
<TD>title1中国</TD>
<TD>title2</TD>
<TD>title3</TD>
<TD>title4</TD>
</TR>
<TR>
<TD>content11</TD>
<TD>content12</TD>
<TD>content13</TD>
<TD>content14</TD>
</TR>
<TR>
<TD>content21</TD>
<TD>content22</TD>
<TD>content23</TD>
<TD>content24</TD>
</TR>
<TR>
<TD>content31</TD>
<TD>content32</TD>
<TD>content33</TD>
<TD>content34</TD>
</TR>
</TABLE>

以下存为grid.htc//  描述         : 网格
//  版本         : 1.0
//  作者         : 宝玉 http://www.nwpubbs.net
//  最新更新   : 2003-5-21
//  备注         :<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready"   ONEVENT="fnInit()"   />
<PUBLIC:ATTACH EVENT="onclick"   ONEVENT="fnClick()"   />
<SCRIPT LANGUAGE="JScript">
window.onerror = function fnNoOp() {alert("error") };
// globals
function fnInit()
{
element.border = 0;
element.cellSpacing = 0;
element.cellPadding = 0;
element.style.borderLeft="1px solid ThreeDDarkShadow";
element.style.borderTop="1px solid ThreeDDarkShadow";
element.style.borderRight="1px solid black";
element.style.borderBottom="1px solid black";
element.style.tableLayout = "fixed";
for(var i=0;i<element.rows.length;i++)
{
var _tr = element.rows[i];
for(var j=0;j<_tr.cells.length;j++)
{
var _td = _tr.cells(j);
_td.noWrap = true;
if(i==0)
{
var _div = window.document.createElement("div");
_div.style.borderLeft = "1px solid ButtonHighlight";
_div.style.borderTop = "1px solid ButtonHighlight";
_div.style.borderRight = "1px solid ButtonShadow";
_div.style.borderBottom = "1px solid ButtonShadow";
_div.style.backgroundColor = "ButtonFace";
_div.style.width = "100%";
_div.style.height = "100%";
_div.innerHTML = _td.innerHTML;
_td.innerHTML = "";
_td.appendChild(_div); _td.style.borderRight = "1px solid black";
_td.style.borderBottom = "1px solid black";
_td.align = "center"; _td.style.borderRight = "1px solid #C0C0C0";
_td.style.borderBottom = "1px solid #C0C0C0"; _tr.attachEvent("onmousedown", fnMousedown);
_tr.attachEvent("onmousemove",fnMousemove);
_tr.attachEvent("onmouseover",fnMouseover);
_tr.attachEvent("onselectstart",fnCancel);
window.document.attachEvent("onmouseup", fnMouseup);
window.document.attachEvent("onmousemove",fnMouseMove);
}
else{
_td.style.borderRight = "1px solid #C0C0C0";
_td.style.borderBottom = "1px solid #C0C0C0";
}
}
_td = _tr.insertCell(0); var _div = window.document.createElement("div");
_div.style.borderLeft = "1px solid ButtonHighlight";
_div.style.borderTop = "1px solid ButtonHighlight";
_div.style.borderRight = "1px solid ButtonShadow";
_div.style.borderBottom = "1px solid ButtonShadow";
_div.style.backgroundColor = "ButtonFace";
_div.style.width = "100%";
_div.style.height = "100%";
_div.innerHTML = "  ";
_td.appendChild(_div);
_td.style.borderRight = "1px solid black";
_td.style.borderBottom = "1px solid black";
}

var _line = window.document.createElement("DIV");
_line.setAttribute("id","splitLine");
_line.style.position = "absolute";
_line.style.backgroundColor="#000000";
_line.style.width=1;
window.document.body.appendChild(_line);
element.splitLine = _line;
element.splitLine.style.display = "none";
alert(window.document.body.innerHTML);
}
function fnMouseover()
{
return;
}
function fnMouseMove(){
if(!element.splitlocked) return;
fnMousemove();
}
function fnMousemove(){
var oEl = event.srcElement;
element.splitLine.style.left = window.event.x;
element.splitLine.style.top = getTop(element);
element.splitLine.style.height = element.parentElement.clientHeight;
if(element.splitlocked) return;
if(!IfSplitLocation(oEl)) return;
}
function fnClick(){
var oEl = event.srcElement;
}
function fnMousedown(){
var oEl = event.srcElement;
if(!IfSplitLocation(oEl)) return;
element.splitLine.style.display = "";
element.splitlocked  = true;
window.document.attachEvent("onselectstart",fnCancel);
}
function fnMouseup()
{
element.splitLine.style.display = "none";
element.splitlocked  = false;
element.document.body.style.cursor='default';
if(element.curResizeTD == null) return;
var otd = element.curResizeTD;
var otdLeft = getLeft(otd);
var otdwidth =  element.splitLine.style.pixelLeft - otdLeft
if(otdwidth < 0) return;
otd.style.width = otdwidth;
window.document.detachEvent("onselectstart",fnCancel);
}
function IfSplitLocation(oEl)
{
if(oEl.tagName == "DIV")
oEl = oEl.parentElement;
if(oEl.tagName == "TD")
{
if(Math.abs(event.offsetX - oEl.clientWidth) <= 5)
{
element.curResizeTD = oEl;
element.document.body.style.cursor='col-resize';
}

else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0){
if(oEl.cellIndex>0){
element.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);
element.document.body.style.cursor='col-resize';
}
}
else{
element.curResizeTD = null;
element.document.body.style.cursor='default';
return false;
}
}
return true;
}
function getTop(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function getLeft(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
/*****************************************************
禁止拖动
*****************************************************/
    function fnCancel()
    {
      window.event.returnValue = false;
return false;
}
   </SCRIPT>
</PUBLIC:COMPONENT>

BlueDestiny(May Be I am Really never online.) 兄:
很感谢你的代码示例，对如没有加固定行和列的样式来说，你这个是没有问题的，而且其它一些调整列宽的示例也是好的，
但是一旦把你的这个Htc文件放入我上面的Table代码，在拖动宽度时就会出现混乱，可否
帮我改一下你这个Htc,以适应我上面的那个Table呢？谢谢！

问题主要出在如下的方法，当拖动宽度并放开时，你的计算方法，对于这行加了
style='position: relative;top: expression(this.offsetParent.scrollTop);
这个样式，或都左边固定的例加了
style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);
这个样式，都会计算不对，关键是我对脚本不是很熟，所以不知如何去改，
如果你有时间，麻烦帮忙改改，你只要把我最上面的那个Table，加上你这个Grid.htc就可以看到
不对的效果了。谢谢！
function fnMouseup()
{
element.splitLine.style.display = "none";
element.splitlocked = false;
element.document.body.style.cursor='default';
if(element.curResizeTD == null) return;
var otd = element.curResizeTD;
var otdLeft = getLeft(otd);
var otdwidth = element.splitLine.style.pixelLeft - otdLeft
if(otdwidth < 0) return;
otd.style.width = otdwidth;
window.document.detachEvent("onselectstart",fnCancel);
}

调整窗口大小，可以看到相关效果:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
}; .relativeTag
{
position:relative;
};.fixedHeaderCol
{background-color:#cccccc;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
}; .mainDiv
{
overflow:auto;
scrollbar-face-color:9999ff;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style><style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:100;
left:expression(this.parentElement.offsetWidth-1);
cursor:e-resize;}
</style><script language=javascript>function MouseDownToResize(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}</script></head> <body>
部分代码来自：<br>http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
<br>
  <div class="mainDiv" id=mailContainerDiv>
     <table width="100%" cellspacing=0 border=1 style="margin-top:-2;margin-left:-1" id=theObjTable >
     <TR class="fixedHeaderTr" style="background:navy;color:white;">
     <TD nowrap class="fixedHeaderCol" style="background:navy;color:white;z-index:9;">
       <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
       Header A
     </TD>
     <TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">
       <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
       Header B
     </TD>
     <TD nowrap>
       <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
       Header C
     </TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol" >B</TD>
     <TD nowrap >
       部分代码来自：<br>
       http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
     </TR >
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     </table>
  </div>
</body>
</html>

刚才贴的那一个会把列宽调得尽量小（但保证内容显示），
再发一个可以把列调到隐藏的。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
}; .relativeTag
{
position:relative;
};.fixedHeaderCol
{background-color:#cccccc;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
}; .mainDiv
{
overflow:auto;
scrollbar-face-color:9999ff;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style><style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:100;
left:expression(this.parentElement.offsetWidth-1);
cursor:e-resize;}
</style><script language=javascript>function MouseDownToResize(obj){
setTableLayoutToFixed();
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}function setTableLayoutToFixed()
{
if(theObjTable.style.tableLayout=='fixed') return;
   var headerTr=theObjTable.rows[0];
    for(var i=0;i<headerTr.cells.length;i++)
    {
    headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;
    }

    for(var i=0;i<headerTr.cells.length;i++)
    {
    headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;
    }
    theObjTable.style.tableLayout='fixed';
}
</script></head> <body>
部分代码来自：<br>http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
<br>
  <div class="mainDiv" id=mailContainerDiv>
     <table width="100%" cellspacing=0 border=1 style="margin-top:-2;margin-left:-1" id=theObjTable >
     <TR class="fixedHeaderTr" style="background:navy;color:white;">
     <TD nowrap class="fixedHeaderCol" style="background:navy;color:white;z-index:9;">
       <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
       Header A
     </TD>
     <TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">
       <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
       Header B
     </TD>
     <TD nowrap>
       <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
       Header C
     </TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol" >B</TD>
     <TD nowrap >
       部分代码来自：<br>
       http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
     </TR >
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     <TR class="relativeTag" >
     <TD class="fixedHeaderCol" >A</TD>
     <TD class="fixedHeaderCol">B</TD>
     <TD>C</TD>
     </TR>
     </table>
  </div>
</body>
</html>

使用以上的代码请注意：
不要将setTableLayoutToFixed函数里的两个for改成一个for.

JK_10000(JK) 兄:非常感谢你多次的帮助，我测试了下，基本上可以了.同时感谢楼上所有兄弟的协助，等我完成后再共享给大家。

昨天上51js上，看见月影写了一个和你这个一模一样的，全部都用expression来写的，速度慢是慢了一些，你自己把expression改成js就行了。

调试易

已经实现固定多行多列的Table，怎样实现调整列宽，难吗?

解决方案 »