Js拖拽實現改變Table的列寬

如題，樓主是Js小白，最近遇到問題，需要用Js實現GridView的列拖拽改變大小，在網上找到一段代碼如下：

function?MouseDownToResize(obj)?{

setTableLayoutToFixed();

obj.mouseDownX?=?event.clientX;?//當事件被觸發時鼠標指針相對于瀏覽器頁面(或客戶區)的水平坐標

obj.pareneTdW?=?obj.parentNode.offsetWidth;?//獲取Td的寬度

obj.pareneTableW?=?document.getElementById("Grid_DTable1").offsetWidth;?//獲取整個表格的寬度

obj.setCapture();?//設置屬于當前文檔的對象的鼠標捕捉

}

function?MouseMoveToResize(obj)?{

if?(!obj.mouseDownX)?return?false;?//

var?newWidth?=?obj.pareneTdW?*?1?+?event.clientX?*?1?-?obj.mouseDownX;?//鼠標移動時把寬度設置為之前的寬度加上水平位移再減去之前相對于瀏覽器的坐標

if?(newWidth?>?10)?{

var?theObjTable?=?document.getElementById("Grid_DTable1");

obj.parentElement.style.width?=?newWidth;

theObjTable.style.width?=?obj.pareneTdW?*?1?+?event.clientX?*?1?-?obj.mouseDownX;

}

}

function?MouseUpToResize(obj)?{

obj.releaseCapture();?//釋放當前文檔中對象的鼠標捕捉

obj.mouseDownX?=?0;

}

function?setTableLayoutToFixed()?{

var?theObjTable?=?document.getElementById("Grid_DTable1");

if?(theObjTable.style.tableLayout?==?'fixed')?return;

var?headerTr?=?theObjTable.rows[0];

for?(var?i?=?0;?i?

headerTr.cells[i].styleOffsetWidth?=?headerTr.cells[i].offsetWidth;

}

for?(var?i?=?0;?i?

headerTr.cells[i].style.width?=?headerTr.cells[i].styleOffsetWidth;

}

theObjTable.style.tableLayout?=?'fixed';

}

代碼中注釋是我查資料之后加的，但是這代碼里面還是不太懂，有沒有大神能介紹下這段代碼的思路？或者說關鍵點也行，還有問題就是，我自己創建新的GridView拖拽正常，但是在我的項目中使用這段代碼，?這樣的標題就沒有跟著一起變化，這是怎么回事？還有就是拖拽完之后之前居中的樣式也不見了，請問怎么修改？

------解決方案--------------------

你這個只能用于?ie?！

推薦一個?http://download.csdn.net/detail/zhangd83/654639

代碼也比較容易看懂

------解決方案--------------------

你?ShowHeader="false"?配置為false還能顯示標題？

IE下也不好使啊。。

試試這個：仿Microsoft?Excel修改單元格寬度

------解決方案--------------------

沉了么，我頂~

------解決方案--------------------

不是jquery啊，純js的。。查看源代碼，將script里面Table類庫存為一個js就行了，需要修改table的頁面導入這個js，然后new下這個Table的實例就可以拖動了

總結

以上是生活随笔為你收集整理的html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。