快捷導(dǎo)航

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

更新時(shí)間：2009年12月02日 00:38:09 作者：

table拖動(dòng)(兼容Firefox 3.5/IE6)，固定表格寬度在網(wǎng)上搜索了好久，找到的都是只能在IE下有效的，后來(lái)終于找到了支持firefox的了。

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>  <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="vvxyksv9kd"    class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 公司名稱 </td> <td class="tit" > <span id="vvxyksv9kd"    class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 訂單客戶 </td> <td class="tit" > <span id="vvxyksv9kd"    class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 部門 </td> <td class="tit" > <span id="vvxyksv9kd"    class="resizeDivClass" id="drag4"><img src="images/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%;">腳本之家</div></td> <td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div></td> <td >廣告部</td> <td >王天一</td> <td >現(xiàn)金</td> </tr > </table>  <div   class="vvxyksv9kd"   id="my"></div> <div   class="vvxyksv9kd"   id="my2"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(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>  <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="vvxyksv9kd"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 公司名稱 </td> <td class="tit"> <span id="vvxyksv9kd"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 訂單客戶 </td> <td class="tit"> <span id="vvxyksv9kd"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 部門 </td> <td class="tit"> <span id="vvxyksv9kd"    class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 業(yè)務(wù)員 </td> <td class="tit"> <span id="vvxyksv9kd"    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>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

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

您可能感興趣的文章: