php改变表格th大小,表格可拖拉列改变列大小(使用的时候将youElement全部替换称你要添加这个效果的元素,需是jqery的选择器格式,如:$("table th/td"))...

$(function () {

var isMouseDown = false;

var currentTh = null;

youElement.bind({

mousedown: function (e) {

var $th = $(this);

var left = $th.offset().left; //元素距左

var rightPos = left + $th.outerWidth();

if (rightPos - 4 <= e.pageX && e.pageX <= rightPos) {

isMouseDown = true;

currentTh = $th;

youElement.css('cursor', 'ew-resize');

//创建遮罩层,防止mouseup事件被其它元素阻止冒泡,导致mouseup事件无法被body捕获,导致拖动不能停止

var bodyWidth = $('body').width();

var bodyHeight = $('body').height();

$('body').append('

}

}

});

$('body').bind({

mousemove: function (e) {

//移动到column右边缘提示

youElement.each(function (index, eleDom) {

var ele = $(eleDom);

var left = ele.offset().left; //元素距左

var rightPos = left + ele.outerWidth();

if (rightPos - 4 <= e.pageX && e.pageX <= rightPos) { //移到列右边缘

ele.css('cursor', 'ew-resize');

} else {

if (!isMouseDown) { //不是鼠标按下的时候取消特殊鼠标样式

ele.css("cursor", "auto");

}

}

});

//改变大小

if (currentTh != null) {

if (isMouseDown) { //鼠标按下了,开始移动

var left = currentTh.offset().left;

var paddingBorderLen = currentTh.outerWidth() - currentTh.width();

currentTh.width((e.pageX - left - paddingBorderLen) + 'px');

var s = currentTh[0];

while(s.tagName!="TABLE"){

s=s.parentNode;

}

for (let i = 0; i

$(s.rows[i].cells[currentTh[0].cellIndex]).width((e.pageX - left - paddingBorderLen) + 'px');

}

}

}

},

mouseup: function (e) {

isMouseDown = false;

currentTh = null;

youElement.css('cursor', 'auto');

$('#mask').remove();

}

});

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值