实现可动态改变宽度的表格简单方法
2008-02-23 09:33:49来源:互联网 阅读 ()
<head>
< %
'生成 css 类 ,用于设置表格
cssClassName="t"
cssClassNameMaxID=400
cssClassNameMinID=1
minWidth=50
Response.Write "<style>"
Response.Write vbcrlf
for i=cssClassNameMinID to cssClassNameMaxID
Response.Write "." & cssClassName & i
Response.Write "{cursor:default;font-size:13;color:ff0000;width:" & (minWidth i) & "}"
Response.Write vbcrlf
next
Response.Write "</style>"
% >
</head>
<body onmouseup="mUp();tmUp();">
<table border="0" cellpadding="0" id="table1" bgcolor=f0f0f0 cellspacing="0" >
<tr bgcolor=dddddd height=23>
<td style='border-bottom:1 solid #707070' background="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_h.gif" class="< %=cssClassName & "100"% >"> 保镖</td>
<td style='border-bottom:1 solid #707070' width=5 id="a1" align="center" onmousedown="mDown('1')" onmousemove="mMove('1');" onmouseup="mUp()" onmouseout="mOut();" ><img src="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_fgf.gif" border=0 height=23></td>
<td style='border-bottom:1 solid #707070' background="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_h.gif" align=center class="< %=cssClassName & "100"% >"> 厨师</td>
<td style='border-bottom:1 solid #707070' width=5 id="a3" onmousedown="mDown('3')" onmousemove="mMove('3');" onmouseup="mUp()" onmouseout="mOut();" ><img src="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_fgf.gif" border=0 height=23></td>
<td style='border-bottom:1 solid #707070' background="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_h.gif" align=center class="< %=cssClassName & "100"% >"> 司机</td>
<td style='border-bottom:1 solid #707070' width=5 id="a5" onmousedown="tmDown()" onmousemove="tmMove();" onmouseup="tmUp()" onmouseout="tmOut();" ><img src="http://blog.csdn.net/images/blog_csdn_net/precipitant/36234/o_fgf.gif" border=0 height=23></td>
</tr>
< %
rcount=1
for i=1 to 10
rcount=rcount 1
% >
<tr height=23>
<td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >" >
孙悟空
</td>
<td style='border-bottom:1 solid #e0e0e0'> </td>
<td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >" align=center >
猪八戒
</td>
<td style='border-bottom:1 solid #e0e0e0'> </td>
<td style='border-bottom:1 solid #e0e0e0' class="< %=cssClassName & "100"% >" align=center >
沙和尚
</td>
<td style='border-bottom:1 solid #e0e0e0'> </td>
</tr>
< %next% >
</table>
</body>
< script language=javascript>
var minWidth="<%=minWdith%>";
var cNameRoot="<%=cssClassName%>";
var rowCount="<%=rcount%>";
var mYes="0";
var mLeft;
var leftID0;
var rightID0;
var misAdjust=1.2 //用于调整误差
var tmYes="0";
//定义拖拉时鼠标指针样式
var ie6;
ie6 = (window.navigator.appVersion.indexOf("MSIE 6.") !=0)
if(ie6)
{
document.getElementById("a1").style.cursor='col-resize';
document.getElementById("a3").style.cursor='col-resize';
}
else
{
document.getElementById("a1").style.cursor='w-resize';
document.getElementById("a3").style.cursor='w-resize';
}
document.getElementById("a5").style.cursor='w-resize';
function mOut()
{
mYes="0"
}
function mUp()
{
mYes="0"
}
function mDown(curColumn)
{
var className0;
mYes="1";
className0=document.getElementById("table1").rows[0].cells[parseInt(curColumn)-1].className;
leftID0=className0.substring(cNameRoot.length,className0.length);
className0=document.getElementById("table1").rows[0].cells[parseInt(curColumn) 1].className;
rightID0=className0.substring(cNameRoot.length,className0.length);
mLeft=event.clientX;
}
function mMove(curColumn)
{
if(mYes=="1")
{
var leftID;
var rightID;
var curLeft;
curLeft=event.clientX;
leftID=parseInt(parseInt(leftID0) (parseInt(curLeft) - parseInt(mLeft)) * misAdjust);
rightID=parseInt(parseInt(rightID0) - (parseInt(curLeft) - parseInt(mLeft)) * misAdjust);
if(parseInt(leftID)>1 && parseInt(rightID)>1)
{
for(var i=0;i<rowCount;i )
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:asp写的日志处理方法
下一篇:ASP中的日期函数
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash