鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本兼容ie/firefox

2019-11-21 00:56:55

字體：大中小

供稿：網(wǎng)友

table拖動(dòng)(兼容Firefox 3.5/IE6)，固定表格寬度

<html> <title>table拖動(dòng)(兼容Firefox 3.5/IE6)，固定表格寬度</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"></style> <script type="text/javascript"></script> <body > <table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" > <tr > <td class="num" >序號(hào)</td> <td class="tit" > <span id="iwvjtn8m0"    class="resizeDivClass" id="drag"><img src="https://www.jb51.netimages/box1.gif" src="images/box1.gif" width="3" height="18"></span> 公司名稱 </td> <td class="tit" > <span id="iwvjtn8m0"    class="resizeDivClass" id="drag2"><img src="https://www.jb51.netimages/box1.gif" src="images/box1.gif" width="3" height="18"></span> 訂單客戶 </td> <td class="tit" > <span id="iwvjtn8m0"    class="resizeDivClass" id="drag3"><img src="https://www.jb51.netimages/box1.gif" src="images/box1.gif" width="3" height="18"></span> 部門 </td> <td class="tit" > <span id="iwvjtn8m0"    class="resizeDivClass" id="drag4"><img src="https://www.jb51.netimages/box1.gif" src="images/box1.gif" width="3" height="18"></span> 業(yè)務(wù)員 </td> <td class="tit" > 交款方式 </td> </tr> <tr > <td class="num" >1</td> <td> <div style="white-space:nowrap;overflow:hidden;width:100%;">武林網(wǎng)</div></td> <td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">VeVB.COm</div></td> <td >廣告部</td> <td >王天一</td> <td >現(xiàn)金</td> </tr > </table>  <div   class="iwvjtn8m0"   id="my"></div> <div   class="iwvjtn8m0"   id="my2"></div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上面代碼是本人從網(wǎng)上搜集的，并非本人編寫，特此聲明。

下面附上兩個(gè)是IE only的，大家都可以參考下。

<html> <title>拖動(dòng)列寬的表格</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"></style> <script language="javascript"></script> <body> <table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"> <tr> <td class="num">序號(hào)</td> <td width="100px" class="tit"> <span id="iwvjtn8m0"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 公司名稱 </td> <td class="tit"> <span id="iwvjtn8m0"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 訂單客戶 </td> <td class="tit"> <span id="iwvjtn8m0"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 部門 </td> <td class="tit"> <span id="iwvjtn8m0"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 業(yè)務(wù)員 </td> <td class="tit"> <span id="iwvjtn8m0"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 交款方式 </td> </tr> <tr> <td class="num" >1</td> <td >中國(guó)電信</td> <td >訂單客戶名稱</td> <td >廣告部</td> <td >王天一</td> <td >現(xiàn)金</td> </tr> <tr> <td class="num" >2</td> <td >中國(guó)移動(dòng)</td> <td >訂單客戶名稱</td> <td >營(yíng)銷部</td> <td >李小紅</td> <td >信用卡</td> </tr> <tr> <td class="num" >3</td> <td >中國(guó)聯(lián)通</td> <td >訂單客戶名稱</td> <td >市場(chǎng)部</td> <td >王老二</td> <td >銀行卡</td> </tr> </table> <script language="javascript"></script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

下面是通過(guò)htc來(lái)實(shí)現(xiàn)的。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

注意上面的代碼，需要下載htc文件

上一篇：JavaScript Object的extend是一個(gè)常用的功能

下一篇：用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼