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的实例就可以拖动了