社区
ASP
帖子详情
100分求通过鼠标拖动改变表格各列的宽度的代码
touzi
2006-01-04 01:29:33
效果跟SQL的表格一样,可以通过鼠标拖动改变表格各列的宽度
求这样的代码
...全文
110
7
打赏
收藏
100分求通过鼠标拖动改变表格各列的宽度的代码
效果跟SQL的表格一样,可以通过鼠标拖动改变表格各列的宽度 求这样的代码
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
7 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
AVAmyZ
2006-01-04
打赏
举报
回复
mark
realjoshzuo
2006-01-04
打赏
举报
回复
收藏!!
巡山小校
2006-01-04
打赏
举报
回复
一切皆有可能。。
skycuilin
2006-01-04
打赏
举报
回复
上面忘记写名字了,楼上的存为grid.htc就行了,这个是index.htm
<div style="height:500">
<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>
</div>
skycuilin
2006-01-04
打赏
举报
回复
我发个宝玉的作品上来吧.两个文件.grid.htc和index.htm
// 描述 : 网格
// 版本 : 1.0
// 作者 : 宝玉 http://www.nwpubbs.net
// 最新更新 : 2003-5-21
// 备注 :
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="fnInit()" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="fnClick()" />
<METHOD NAME="menubarpush"/>
<SCRIPT LANGUAGE="JScript">
// window.onerror = function fnNoOp() {return true; };
// globals
function fnInit()
{
element.border = 0;
element.cellSpacing = 0;
element.cellPadding = 0;
// element.style.tableLayout = "fixed";
/*
element.style.borderLeft="1px solid ThreeDDarkShadow";
element.style.borderTop="1px solid ThreeDDarkShadow";
element.style.borderRight="1px solid black";
element.style.borderBottom="1px solid black";
*/
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";
/**/
_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.style.position = "absolute";
_line.style.backgroundColor="#000000";
_line.style.width=1;
window.document.body.appendChild(_line);
element.splitLine = _line;
element.splitLine.style.display = "none";
}
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>
lwd10000
2006-01-04
打赏
举报
回复
SF没了。。继续看下边。
若白师妹
2006-01-04
打赏
举报
回复
web很难做
鼠标
拖动
改变
表格
列宽
"
鼠标
拖动
改变
表格
列宽"的功能是提升用户体验的重要一环,它允许用户根据自己的需求自定义
表格
列的
宽度
,使得数据查看更为便捷。这个功能通常通过JavaScript实现,因为它能够实时响应用户的交互操作。 首先,我们要...
可通过
鼠标
拖动
调整
表格
单元格
宽度
效果
代码
[兼容IE,firefox]
"可通过
鼠标
拖动
调整
表格
单元格
宽度
效果
代码
[兼容IE,firefox]"这个标题所描述的是一种增强用户界面的技术,它允许用户通过
鼠标
直接
拖动
来
改变
表格
中单元格的
宽度
,从而更好地适应显示需求。这种功能在数据展示和分析...
可通过
鼠标
拖动
调整
表格
单元格
宽度
效果
代码
[兼容IE,firefox].zip
"可通过
鼠标
拖动
调整
表格
单元格
宽度
效果
代码
[兼容IE,firefox]"是一个实现用户自定义
表格
列宽的功能,它允许用户通过
鼠标
拖动
来
改变
表格
中单元格的
宽度
,从而提升用户体验。这个功能对于那些需要频繁查看和比较数据的...
jQuery
表格
可
拖动
调整列
宽度
大小
本主题聚焦于jQuery中的一个实用特性——
表格
列宽的
拖动
调整,这是一个提高用户体验的功能,允许用户根据需要自定义
表格
列的
宽度
。下面我们将深入探讨这个功能的实现原理和相关知识点。 首先,要实现jQuery
表格
列宽...
jQuery+js 实现Table
表格
可任意
拖动
调整列
宽度
大小 适用于列表页等表头
拖动
宽度
设置
总的来说,通过jQuery和JavaScript的组合,我们可以实现一个功能完善的
表格
列
宽度
拖动
调整功能,提升用户的交互体验。这个功能对于数据展示和列表页面尤其有用,让用户可以根据自己的需求自由调整列宽,使得数据更加...
ASP
28,406
社区成员
356,946
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章