实现可动态改变宽度的表格简朴方式-会员卡,广州印刷,深圳印刷,印刷公司,名片,彩页,名片设计,设计教程,名片制作,彩色名片,名片模板,贵宾卡,pvc卡,设计欣赏,深圳名片,广州名片,business card design

首页	名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash

» 彩色名片
» PVC卡
» 彩色磁性卡
» 彩页/画册
» 个性印务
» 彩色不干胶
» 明信片
   » 明信片
   » 彩色书签
   » 门挂
» 其他产品与服务
   » 创业锦囊
   » 办公用品
   » 信封、信纸
   » 便签纸、斜面纸砖
   » 无碳复印纸
   » 海报
   » 大篇幅印刷
   » KT板
   » 海报
   » 横幅

实现可动态改变宽度的表格简朴方式
<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++)
{
document.getElementById("table1").rows[i].cells[parseInt(curColumn)-1].className=cNameRoot + (leftID);
document.getElementById("table1").rows[i].cells[parseInt(curColumn)+1].className=cNameRoot + (rightID);
}
}
}
}

function tmOut()
{
//tmYes="0"
}

function tmUp()
{
tmYes="0"
window.status="*";
}

var ColumnCount=(document.getElementById("table1").rows[0].cells.length)/2;
var ID0=new Array(ColumnCount);
var ID1=new Array(ColumnCount);
var ID2=new Array(ColumnCount);
var idSum;

function tmDown()
{
var className0;
tmYes="1";
idSum=0;
for(var i=0;i<ColumnCount;i++)
{
className0=document.getElementById("table1").rows[0].cells[i*2].className;
ID0[i]=className0.substring(cNameRoot.length,className0.length);
ID2[i]=0;
idSum+=parseInt(ID0[i]);
}
for(var i=0;i<ColumnCount;i++)
{
ID1[i]=ID0[i]/idSum;
}
mLeft=event.clientX;
}

function tmMove()
{
if(tmYes=="1")
{
var curLeft;
curLeft=event.clientX;
for(var i=0;i<ColumnCount;i++)
{
ID2[i]=parseInt(ID0[i]) + parseInt((parseInt(curLeft) - parseInt(mLeft)) * ID1[i])
}
//window.status = mLeft + ";" + curLeft + "||||" + ID1[0] + ";" + ID1[1] + ";" + ID1[2] + " |||| " + ID0[0] + ";" + ID0[1] + ";" + ID0[2] + " |||| " + ID2[0] + ";" + ID2[1] + ";" + ID2[2] + ";";
for(var i=0;i<rowCount;i++)
{
for(var j=0;j<ColumnCount;j++)
{
document.getElementById("table1").rows[i].cells[j*2].className=cNameRoot + (ID2[j]);
}
}
}
}

< /script>

返回类别: 教程
上一教程: ASP服务器组件的编程
下一教程: RS.OPEN SQL,CONN,A,B 全接触

您可以阅读与"实现可动态改变宽度的表格简朴方式"相关的教程:
· 分栏显示记录集的表格演示，并实现了分页
· asp实现在web中显示电子表格数据（三）创建数据表列表和名字范围
· 真正实现两个列表框动态关联
· 在ASP网页中实现DROPDOWN控件动态添加选项
· asp实现在web中显示电子表格数据（二）生成HTML表格


	快精灵印艺坊版权所有	首页会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店网站地图关于我们友情链接