jQuery拖拽表格改变列宽

Html

Css

拖拽标题行这里	标题	标题	标题	标题
1	1	1	1	1
2	2	2	2	2
3	3	3	3	3

table {
	width:100%;
}

$(function() {

function isNullOrUndefined(obj) {
         if (typeof(obj) == "undefined" || obj == null) {
             return true;
         }
         return false;
     }

function registerTableDragEvent() {

var dragTH; //记录拖拽的列
         //第一步按下
         $('#dragTable th').mousedown(function(e) {
             e = e || window.event;
             if (e.offsetX > $(this).innerWidth() - 10) {
                 dragTH = $(this);
                 dragTH.mouseDown = true;
                 dragTH.oldX = e.pageX || e.clientX;
                 dragTH.oldWidth = $(this).innerWidth();
             }
         })
         //第二步 拖动
         $('#dragTable th').mousemove(function(e) {
             //改鼠标样式
             if (e.offsetX > $(this).innerWidth() - 10) {
                 $(this).css({
                     cursor: "e-resize"
                 });
             } else {
                 $(this).css({
                     cursor: "default"
                 });
             }
             if (isNullOrUndefined(dragTH)) {
                 dragTH = $(this);
             }
             if (!isNullOrUndefined(dragTH.mouseDown) && dragTH.mouseDown == true) {
                 var difference = (e.pageX - dragTH.oldX) || (e.clientX - dragTH.oldX);
                 var newWidth = dragTH.oldWidth + difference; //新的宽度
                 dragTH.width(newWidth)
             }
         })
         // 第三步，释放
         $("table#dragTable th").mouseup(function(e) {
             // 还原鼠标样式
             // if (isNullOrUndefined(dragTH)) {
             //     dragTH = $(this);
             // }
             dragTH.mouseDown = false;
             // $(dragTH).css({
             //     cursor : "default"
             // });
         });
     }
     registerTableDragEvent()

})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery拖拽表格改变列宽



代码描述：可以拖拽列改变表格列宽

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

zhaozhuoboy

相关代码

jQuery拖拽表格改变列宽

最新