|
|
/**
|
|
|
* Created by ttang on 2016/5/24.
|
|
|
*/
|
|
|
$(document).ready(function(){
|
|
|
$("th").each(function(){
|
|
|
$(this).css("width",$(this).width()-1);
|
|
|
});
|
|
|
resizeable_table = function(colS,colE,p1,p2){
|
|
|
var headerTds = document.getElementById("homework_table").rows[0].cells;
|
|
|
var mousedown = false;
|
|
|
var resizeable = false;
|
|
|
var targetTd;
|
|
|
var screenXStart =0;
|
|
|
var tdWidth = 0;
|
|
|
var headerWidth = 0;
|
|
|
var tblObj = document.getElementById("homework_table");
|
|
|
var tblWidth = tblObj.offsetWidth;
|
|
|
for(var i = colS;i<colE;i++){
|
|
|
addListener(headerTds[i],"mousedown",onmousedown);
|
|
|
addListener(headerTds[i],"mousemove",onmousemove);
|
|
|
addListener(headerTds[i],"mouseup",onmouseup);
|
|
|
}
|
|
|
|
|
|
function onmousedown(event){
|
|
|
if (resizeable == true){
|
|
|
var evt =event||window.event;
|
|
|
mousedown = true;
|
|
|
screenXStart = evt.screenX;
|
|
|
tdWidth = targetTd.offsetWidth;
|
|
|
tdWidth2 = targetTd.nextElementSibling.offsetWidth;
|
|
|
totalWidth = tdWidth + tdWidth2;
|
|
|
}
|
|
|
}
|
|
|
function onmousemove(event){
|
|
|
var evt =event||window.event;
|
|
|
var srcObj = getTarget(evt);
|
|
|
var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键，解决了Firefox无offsetX属性的问题
|
|
|
if (mousedown == true){
|
|
|
var width = (tdWidth + (evt.screenX - screenXStart)) - p1 + "px";//计算后的新的宽度
|
|
|
var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - p2 + "px";
|
|
|
if (parseInt(width)<5 || parseInt(width2)<5 || tdWidth > totalWidth || tdWidth2 > totalWidth){
|
|
|
tartgetTd = null;
|
|
|
resizeable = false;
|
|
|
mousedown = false;
|
|
|
}else{
|
|
|
targetTd.style.width = width;
|
|
|
targetTd.nextElementSibling.style.width = width2;
|
|
|
}
|
|
|
}else{
|
|
|
var trObj = tblObj.rows[0];
|
|
|
if(srcObj.offsetWidth - offsetX <=5){//实际改变本单元格列宽
|
|
|
targetTd=srcObj;
|
|
|
resizeable = true;
|
|
|
for(var i = colS;i<colE;i++){
|
|
|
headerTds[i].style.cursor='col-resize';//修改光标样式
|
|
|
};
|
|
|
}else{
|
|
|
resizeable = false;
|
|
|
mousedown = false;
|
|
|
srcObj.style.cursor='default';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
function onmouseup(event){
|
|
|
tartgetTd = null;
|
|
|
resizeable = false;
|
|
|
mousedown = false;
|
|
|
document.body.style.cursor='default';
|
|
|
}
|
|
|
document.body.onmouseup = function(event){
|
|
|
tartgetTd = null;
|
|
|
resizeable = false;
|
|
|
mousedown = false;
|
|
|
document.body.style.cursor='default';
|
|
|
}
|
|
|
function getTarget(evt){
|
|
|
return evt.target || evt.srcElement;
|
|
|
}
|
|
|
function addListener(element,type,listener,useCapture){
|
|
|
element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
|
|
|
}
|
|
|
}
|
|
|
}); |
