實現可動態改變寬度的表格簡單方法

來源:互聯網
上載者:User
動態 <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="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://www.163design.net/a/s/"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="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://www.163design.net/a/s/"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="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://www.163design.net/a/s/"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



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。