关于固定表头和列，加改变列宽的问题，高难度！！！！

xiaocaonet 2006-05-23 02:30:27
我在一个表格中采用Div+CSS方式固定了表头和列，但我的改变表格列宽功能动不对了。请问各们高手可有解决方法，如果能有其它办法也行，但必须是对同一个Table操作，高分相送，谢谢!代码如下：
<锁定表头及列的样式>
.LockHeader
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index:10;
}

.LockColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
}
对于改变列宽的代码太长，贴最重要的吧。(参考网上做的)
sub elementOnMouseMove
'鼠标移动事件：
dim cliX, cliY
if iDragCounter < 10 then
iDragCounter = iDragCounter + 1
exit sub
end if
if (bDragMode and not objDragItem is nothing) then '当前为拖动模式
with window.event
cliX = .clientX
cliY = .clientY
.cancelBubble = false
.returnValue = false
end with
with objDragItem
if (.style.visibility = "hidden") then .style.visibility = "visible"
.style.posLeft = cliX - (.offsetWidth / 2)
.style.posTop = cliY - (.offsetHeight - 3)
end with
dragHeadHitIndex = hitTest(cliX, cliY)
end if
end sub

sub elementHeadOnMouseUp
'第一行操作：调整列宽，鼠标抬起:调整列宽
If CurDownMode=True Then '调整表格宽度
'抬起鼠标：调整位置，取消状态
Dim CurTable
Set CurTable=element
If CurChangeMode=True Then
If CurTable.offsetwidth-(OldTdWinX - MyChangeTdLine.offsetLeft )+3-window.document.body.scrollLeft>0 Then
CurTable.Style.Width=CurTable.offsetwidth-(OldTdWinX - MyChangeTdLine.offsetLeft )+3-window.document.body.scrollLeft
If CurTd.offsetwidth-(OldTdWinX - MyChangeTdLine.offsetLeft)+3-window.document.body.scrollLeft>0 Then
CurTd.style.width= CurTd.offsetwidth-(OldTdWinX - MyChangeTdLine.offsetLeft)+3-window.document.body.scrollLeft
End If
End If
End If
SaveWidth '记录当前宽度
CancelState
else
CancelState
Window.event.cancelBubble = false '否则将事件上传
end if
end sub

sub elementHeadOnMouseMove
'鼠标在第一行移动:调整列宽
If CurDownMode=True Then '已经按下，进入调整模式
If window.event.clientX+10+250 > Screen.width Then '提示表格的在屏幕之外了
MyChangeTdDiv.style.Left = window.event.clientX+window.document.body.scrollLeft-10-250
Else
MyChangeTdDiv.style.Left = window.event.clientX+window.document.body.scrollLeft+10
End If
MyChangeTdDiv.style.Top = window.event.clientY+10
TempWidth=CurTd.offsetwidth-(OldTdWinX - MyChangeTdLine.offsetLeft)+3-window.document.body.scrollLeft
MyChangeTdDiv.innerHTML =OldText & "当前竖线坐标X=" & MyChangeTdLine.offsetLeft & "，准备调整列宽为：" & TempWidth
'提示层可见'=========定位竖线层==========
If window.event.clientX > MinWinX Then '位置不小于目标Td最左侧
MyChangeTdLine.style.Left = window.event.clientX+window.document.body.scrollLeft-2
End If
window.event.cancelBubble = true
Else '判断是否可以按下状态
CurChangeMode=False
If Window.event.srcElement.tagName="TD" Then
If Window.event.srcElement.CellIndex=0 Then '第一列
If window.event.offsetX > window.event.srcElement.offsetWidth -10 Then
Set CurTd=Window.event.srcElement
window.event.srcElement.Style.cursor="col-resize"
MinWinX= window.event.clientX- window.event.offsetX + 20
OldTdWinX= window.event.clientX- window.event.offsetX+CurTd.offsetwidth
CurChangeMode=True '鼠标可以按下调整
window.event.cancelBubble = true
Else
window.event.srcElement.Style.cursor="Default"
End If
Else
If window.event.offsetX < 10 Then '操作前一列！只有一列执行上边的语句了。
Set CurTd=Window.event.srcElement.parentElement.cells.item(Window.event.srcElement.CellIndex-1)
window.event.srcElement.Style.cursor="col-resize"
MinWinX= window.event.clientX- window.event.offsetX-CurTd.offsetwidth + 20
OldTdWinX= window.event.clientX- window.event.offsetX
CurChangeMode=True '鼠标可以按下调整
window.event.cancelBubble = true
Else
If window.event.offsetX > window.event.srcElement.offsetWidth -10 Then '操作当前列！
Set CurTd= Window.event.srcElement
window.event.srcElement.Style.cursor="col-resize"
MinWinX= window.event.clientX- window.event.offsetX + 20
OldTdWinX= window.event.clientX- window.event.offsetX+CurTd.offsetwidth
CurChangeMode=True '鼠标可以按下调整
window.event.cancelBubble = true
Else
window.event.srcElement.Style.cursor="Default"
End If
End If
End If
End If

End If
end sub
...全文
637 27 打赏 收藏 转发到动态 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
好的，太感谢你了!!!
hbhbhbhbhb1021 2006-05-24
  • 打赏
  • 举报
 回复
稍等下，兄弟，在调试
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
版主们可否帮忙看看.
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
To:laochake(老茶客):
能否举个例子，谢谢
laochake 2006-05-24
  • 打赏
  • 举报
 回复
如果是IE only的话，用数据岛，然后就可以用那个控件了
（把标准table的数据转成数据岛应该是很容易的事吧）
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
hbhbhbhbhb1021(天外水火(我要多努力)) 兄:
能否帮忙瞧瞧。
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
谢谢，我的意思是说，表格的前面两行和表格的左边两列不动，其它行和列可以滚动，
但同时也要支持改变列宽的功能。我之前所做的，能固定行和列，则不能调整列宽。
请你帮帮忙，能否给个例子，还有我这个只能对单个表操作，因为以前有同事生成了这样的表格
我只需加这两个功能。再次感谢!
hbhbhbhbhb1021 2006-05-24
  • 打赏
  • 举报
 回复
还是只有第一行不动，其他可以滚动的那样？
hbhbhbhbhb1021 2006-05-24
  • 打赏
  • 举报
 回复
你说的固定行和列是指什么？每列都固定那么宽？可以用CSS中的
table-layout:fixed
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
谢谢楼主的回复，可你这个固定不了行和列吧。
高手们，难道无解?
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
问题还是没有解决好，先结贴了，继续开另一贴吧，谢谢楼上这么多兄弟的帮助了。
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
JK_10000(JK)兄，
非常感谢你的建议，我会作相应的改善的，
对于你给的代码，还有一个问题，就是表头左边的那几列锁定的列不能调整列宽了，
能否帮忙再改一下，谢谢！
下班前结贴。
JK_10000 2006-05-24
  • 打赏
  • 举报
 回复


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:1;
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=accountTable.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;
accountTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}

</script>

<script defer>

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;
}

accountTable.style.tableLayout='fixed';
</script>
</head>

<body>
<div id="scrollDiv" style="border-right: #AAA99E 1px solid; border-top: #AAA99E 1px solid;border-bottom: #AAA99E 1px solid; border-left: #AAA99E 1px solid; width: 300px;
overflow: auto; cursor: default; display: inline; position: absolute; height: 200px"
runat="server">
<Table id='accountTable' class='Grid' cellPadding='0' cellSpacing='0' frame='box' STYLE='table-layout:fixed' borderColor='lightgrey'>

<TBODY>
<TR style='position: relative;
top: expression(this.offsetParent.scrollTop);z-index:10;background-color: #E6ECF0;' id=headerTr>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>ID0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>CK0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>Code0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>Descirption0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>TOL0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>XS0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>SS0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>MS0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>DS0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>BS0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>XL0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>ML0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>DL0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>EM0</TD>
<TD class='UnLockColumn' ><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>BM0</TD>
</TR>

<TR style='position: relative;
top: expression(this.offsetParent.scrollTop);z-index:10;background-color: #E6ECF0;'>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
</TR>
</TBODY>
</Table></div>
</body>

</html>

------
代码如上
不过，你的代码有较大的改善空间
最好等到改善后再出货

另外的一个建议：
不要过于追求页面的效果
这不是bs系统的长处
结果可能会适得其反,没有给公司加分，反而给公司减分。
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
laochake(老茶客)兄：
感谢你提供的例子，只是我是在改之前同事的一个功能，而原来的Table里面已经有很多功能处理，而且公司要得很急，所以我没有时间来全部改造.
现在只需要把我上面发的这个Table加上调整列宽的功能。因为固定行和列，上面的Table已做到，我想之所以调整列宽不行，可能是因为固定行和列时用了Postion:Relative的原因，但我对脚本这块不是很熟。
在此恳求各位脚本高手们帮帮忙了。谢谢，
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
<TR style='position: relative;
top: expression(this.offsetParent.scrollTop);z-index:10;background-color: #E6ECF0;'>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'>88</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
<TD class='UnLockColumn'>22</TD>
</TR>
<TR>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>1111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>This is Test</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>1</TD>
<TD class='UnLockColumn'>001</TD>
<TD class='UnLockColumn'>002</TD>
<TD class='UnLockColumn'>003</TD>
<TD class='UnLockColumn'>004</TD>
<TD class='UnLockColumn'>005</TD>
<TD class='UnLockColumn'>006</TD>
<TD class='UnLockColumn'>007</TD>
<TD class='UnLockColumn'>008</TD>
<TD class='UnLockColumn'>009</TD>
<TD class='UnLockColumn'>010</TD>
</TR>
<TR>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>1111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>This is Test</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>1</TD>
<TD class='UnLockColumn'>001</TD>
<TD class='UnLockColumn'>002</TD>
<TD class='UnLockColumn'>003</TD>
<TD class='UnLockColumn'>004</TD>
<TD class='UnLockColumn'>005</TD>
<TD class='UnLockColumn'>006</TD>
<TD class='UnLockColumn'>007</TD>
<TD class='UnLockColumn'>008</TD>
<TD class='UnLockColumn'>009</TD>
<TD class='UnLockColumn'>010</TD>
</TR>
<TR>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>1111</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>This is Test</TD>
<TD style='position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);background-color: #E6ECF0;'>1</TD>
<TD class='UnLockColumn'>001</TD>
<TD class='UnLockColumn'>002</TD>
<TD class='UnLockColumn'>003</TD>
<TD class='UnLockColumn'>004</TD>
<TD class='UnLockColumn'>005</TD>
<TD class='UnLockColumn'>006</TD>
<TD class='UnLockColumn'>007</TD>
<TD class='UnLockColumn'>008</TD>
<TD class='UnLockColumn'>009</TD>
<TD class='UnLockColumn'>010</TD>
</TR>
</TBODY>
</Table></div>
</body>

</html>
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
JK_10000(JK)兄，
谢谢你的回复，你的可以实现调整列宽，但是我的Table由于要支持固定行和列，加上这个功能后，你的这个调整就不起作用了，不知为何，可否帮忙调一下，以下是我的代码,我已实现固定表头和列的功能，但改变列宽的功能就是不行。谢谢

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:1;
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=accountTable.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;
accountTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}

</script>
</head>

<body>
<div id="scrollDiv" style="border-right: #AAA99E 1px solid; border-top: #AAA99E 1px solid;border-bottom: #AAA99E 1px solid; border-left: #AAA99E 1px solid; width: 300px;
overflow: auto; cursor: default; display: inline; position: absolute; height: 200px"
runat="server">
<Table id='accountTable' class='Grid' width='500' height='230' cellPadding='0' cellSpacing='0' frame='box' STYLE='table-layout:fixed' borderColor='lightgrey'>
<COLGROUP id='tg'>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
<COL>
</COLGROUP>
<THEAD style='DISPLAY: none'>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
<TH>
</THEAD>
<TBODY>
<TR style='position: relative;
top: expression(this.offsetParent.scrollTop);z-index:10;background-color: #E6ECF0;'>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>ID0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>CK0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>Code0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>Descirption0</TD>
<TD style='POSITION: relative;LEFT: expression(this.parentElement.offsetParent.scrollLeft);'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>TOL0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>XS0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>SS0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>MS0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>DS0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>BS0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>XL0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>ML0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>DL0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>EM0</TD>
<TD class='UnLockColumn'><font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>BM0</TD>
</TR>
lightninga 2006-05-24
  • 打赏
  • 举报
 回复
看看 ``
laochake 2006-05-24
  • 打赏
  • 举报
 回复
先下载三个文件：

ScrollGrid.css
http://210.51.190.178/scripts/demo/ScrollGrid_V2/css/ScrollGrid.css

ScrollGrid.js
http://210.51.190.178/scripts/demo/ScrollGrid_V2/js/ScrollGrid.js

ScrollGridConfig.js
http://210.51.190.178/scripts/demo/ScrollGrid_V2/js/ScrollGridConfig.js

修改 ScrollGridConfig.js 最后一行为：
ScrollGrid.spacerHTML = " ";

－－－－－－－数据岛例子(文件存储编码gb2312)：－－－－－－－－－－－－
<html>
<head>
<title>带滚动条 固定表头 可调列宽 ScrollGrid 2.0</title>
<LINK rev=stylesheet href="ScrollGrid.css" type=text/css rel=stylesheet>
<SCRIPT language=javascript src="ScrollGrid.js"></SCRIPT>
<SCRIPT language=javascript src="ScrollGridConfig.js"></SCRIPT>
<script language=javascript>
<!--
function doOnload(){
ScrollGrid.registGrid('div1');
if(xmlDoc.documentElement!=null){
ScrollGrid.showData("div1",xmlDoc.documentElement);
}else{
alert("数据岛定义错误！");
}
}
//-->
</script>
</head>
<body onload="doOnload();">

<DIV id=div1 style="WIDTH: 300px; HEIGHT: 200px"></DIV>
<!-------数据岛定义：----->
<xml id="xmlDoc">
<scrollGrid>
<fields>
<field width="45">姓名</field>
<field width="100">学校</field>
<field width="60">电话</field>
</fields>
<dataRows>
<row>
<item><![CDATA[ <a href="javascript:alert('hello');">房某某</a> ]]></item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
<row>
<item>房某某</item><item>北京大学</item><item>516372**</item>
</row>
</dataRows>
</scrollGrid>
</xml>
</body>
</html>
xiaocaonet 2006-05-24
  • 打赏
  • 举报
 回复
hbhbhbhbhb1021(天外水火(我要多努力)) 兄，
我发信息给你了，关于个还有点问题请教。
JK_10000 2006-05-24
  • 打赏
  • 举报
 回复
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:1;
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>

改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" >
<tr bgcolor=cccccc >
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
aaa</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
ddd</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
ddd</td>
</tr>

<tr>
<td>aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a</td><td>bbbb</td><td>dddd</td>
</tr>
</table>
</body>

</html>
加载更多回复（7）
android 横向滚动 tableview,Android自定义表格 LockTableView
LockTableView自定义表格,可锁定双向表头,自适应列宽,自适应行高,下拉刷新,上拉加载,快速集成效果展示工程集成说明第一步//在工程gradle文件里allprojects {repositories {.......maven { url '...
Excel 快捷键
1> 移动移动到当前数据区域的边缘：CTRL+ 箭头键 移动到当前行首列：HOME 移动到首行首列：CTRL+HOME 移动到含有格式或数据的末行末列：CTRL+END 向下移动一屏：PAGE DOWN 向上移动一屏：PAGE UP 向右移动一屏：ALT+...
《计算机实用软件》
题目：在Excel 数据透视表的数据区域默认的字段汇总方式是（） 题目：在Excel 2010中，如果要改变行与行、列与列之间的顺序，应按住（） 题目：在Excel操作中,假设在B5单元格中存有一公式为SUM（） 题目：A.SUM(B2:...
vb+access电脑销售系统的设计与实现
操作要求简单易行，用户...现代科学技术的飞速发展，改变了世界，也改变了人类的生活，作为新世纪的大学生，应该站在时代发展的最前列，掌握现代科学技术知识，调整自己的知识结构和能力结构，以适应社会发展的要求。
王佩丰 Excel 24节课 学习笔记
王佩丰 Excel 24节课笔记## 第1讲 Excel的简单认识 大批量输入公式前不用输入=的操作：文件，选项，高级，Lotus公式 XLW 工作区 可同时调出多个窗格作...交换两列的次序：选中其中一列，将鼠标放在边框线上...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章