JS拖动改变表格列宽的bug,该如何解决
日期：2014-05-16 浏览次数：20391 次
JS拖动改变表格列宽的bug
以下代码只是实现了向右拖动，向左怎么实现。
还有就是如何让它按着拖动。
以下代码只是实现了向右拖动，向左怎么实现。
还有就是如何让它按着拖动。
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档 </title>
<script language="javascript" type="text/javascript">
function Table(n){
this.n=n;
this.t;this.b;this.r;this.w;
}
Table.prototype.init=function(){
this.t=document.getElementById(this.n);
this.b=this.t.getElementsByTagName("tbody")[0];
this.r=this.b.rows; var l=this.r.length;
for(var i=0;i <l;i++){
if(i==0){
var c=this.r[i].cells;this.w=c.length;
for(var x=0;x <this.w;x++){
//添加事件
var th=c[x];
this.addEvent(th,"mousemove",function(event){
event=window.event||event;
var srcObj=event.srcElement||event.target,tblParent=srcObj.parentElement||srcObj.parentNode;
while(tblParent.tagName!='TABLE')tblParent=tblParent.parentElemnt||tblParent.parentNode;
if(srcObj.tagName!='TH')return;
var rowindex=(srcObj.parentElement||srcObj.parentNode).rowIndex;
if(rowindex==0){
if(srcObj.offsetWidth-event.offsetX <3){
srcObj.style.cursor='w-resize';
var intPosX=(new findPos(srcObj)).intX;
srcObj.style.pixelWidth=event.x-intPosX;//event.x
//alert(event.x);
}else if((srcObj.offsetWidth-event.offsetX)>3&&(srcObj.offsetWidth-event.offsetX <6)){
srcObj.style.cursor='w-resize';
var intPosX=(new findPos(srcObj)).intX;
srcObj.style.pixelWidth=event.x-intPosX;
}else{
srcObj.style.cursor='default';
}
}
});
this.addEvent(th,"mousedown",function(event){
});
}
}
}
}
function findPos(obj){ //取得本元素的绝对坐标
var x=obj.offsetLeft, y=obj.offsetTop;
while(obj=obj.offsetParent){x += obj.offsetLeft;y += obj.offsetTop;}
this.intX=x; this.intY=y;
return this
}
Table.prototype.addEvent=function(obj, type, fn){
var d=document;
var browser=function(s){return navigator.userAgent.toLowerCase().indexOf(s)!=-1}; //浏览器类型判断
var isOpera=browser('opera'),isIE=browser('msie')!=-1&&(d.all&&!isOpera);
if(isIE){
obj.attachEvent("on"+type,fn);
}else{
obj.addEventListener(type,fn,false)
}
}
var table=new Table("myTable");
table.addEvent(window,"load",function(){table.init();});
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" class="tablesorter">
<tr>
<th>Last Name </th>
<th>First Name </th>
<th>Email </th>
<th>Due </th>
<th>Web Site </th>
</tr>
<tr>
<td>Smith </td>
<td>John </
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
