我尝试按如下方式实现可调整大小的表格列
function mousemove(event) {
var parent = $element.parent();
var next = parent.next();
var th = parent.parent();
var oldParentWidth = $(parent).width();
var oldNextWidth = $(next).width();
var totalWidth = oldParentWidth + oldNextWidth;
var newParentWidth = event.pageX -$(parent).offset().left;
if( newParentWidth > totalWidth )
return;
if( newParentWidth >= oldParentWidth ) {
$(next).css({
width: (totalWidth - newParentWidth) + "px"
});
$(parent).css({
width: totalWidth - $(next).width() + "px"
});
} else {
$(parent).css({
width: newParentWidth + "px"
});
$(next).css({
width: (totalWidth - $(parent).width()) + "px"
});
}
}
工作演示在这里:http://jsfiddle.net/4kc873ec/3/
当我尝试调整 th 的宽度时,它第一次无法正常工作。然后在它正常工作之后。之后它就可以正常工作了。我究竟做错了什么?
提前致谢。
最佳答案
尝试改变绑定(bind)方式
$('.resizeBar').on('mousedown', function(event) {
event.preventDefault();
$element = $(this);
$(document).on('mousemove', mousemove);
$(document).on('mouseup', mouseup);
});
关于javascript - Jquery 更改表 th 标签无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27122320/