使用鼠标设置单元格宽度!

功能:可以使用鼠标移动到单元格的线上去,移动后,根据移动距离设置表格的宽度

<!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=gb2312" />
<title>无标题文档</title>
<style>
td
{
font-size:14px;
font:bold;
}
input{
border : medium none ;
}
</style>
</head>

<body>


<SCRIPT language=javascript>

var theobject = null;
//var moz=null;
function resizeObject() {
 this.el        = null;
 this.dir    = "";     
 this.grabx = null;    
 this.graby = null;
 this.width = null;
 this.height = null;
 this.left = null;
 this.top = null;
 
 
 this.num=null;
 this.objwidth=null;
 this.endwidth=null;
 
 
}
//-------------------//
//
//getDirection函数根据鼠标移动的位置决定
//返回值
//返回值表示出扩展方向
//
//--------------------//

function getDirection(el) {
 var xPos, yPos, offset, dir;
 dir = "";

 xPos = window.event.offsetX;
 //设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
 yPos = window.event.offsetY;
 //设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标

 offset = 8; //The distance from the edge in pixels
 //el.offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
 
 //el.offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
 //e:东;s:南 w:西 n:北
 //如果鼠标y方向移动小与8,那么位置向南扩展
 //如果鼠标y方向移动小与8,那么位置向北扩展
 //
 //
 /*
 if (yPos<offset) dir += "s";
 else if (yPos > el.offsetHeight-offset) dir += "n";
 */
 if (xPos<offset) dir += "e";
 else if (xPos > el.offsetWidth-offset) dir += "w";

 return dir;
}

 

function doDown() {

  
//event.srcElement:设置或获取触发事件的对象。
 var el = getReal(event.srcElement, "className", "resizeMe");
 
 if (el == null) {
  theobject = null;
  return;
 } 
 
 dir = getDirection(el);
 //
 if (dir == "") return;

 theobject = new resizeObject();
  
 theobject.el = el;
 theobject.dir = dir;
 theobject.grabx = window.event.clientX;
 theobject.graby = window.event.clientY;
 
 theobject.width = el.offsetWidth;
 theobject.height = el.offsetHeight;
 theobject.left = el.offsetLeft;
 theobject.top = el.offsetTop;
 
 //取得移动的列位置

 var hh=document.form1.textfield.length;
 var i=0;
 var location=0;
 var width=0;
 for(i;i<hh;i++)
  {
  
   if(window.event.clientX>getposition(document.form1.textfield[i])+10)
    {       location=location+1;    width=document.form1.textfield[i].offsetWidth;         }
  }
  this.num=location;
  this.width=width;
//设置或获取事件的返回值
//设置或获取当前事件是否要在事件句柄中向上冒泡
 window.event.returnValue = false;
 window.event.cancelBubble = true;
}

function doUp() {
 if (theobject != null) {
 var hh=document.form2.lie1.length;
 var i=0;
 var size=theobject.endwidth-theobject.grabx;
 var size=Math.ceil(size/7.42);
 var lie_num=this.num;
 
    for(i;i<hh;i++)
     {
     
     var obj=eval("document.form2.lie"+lie_num+"["+i+"]");
     var long=obj.getAttribute("size")+size;
     obj.setAttribute('size',long);
             
     }
  theobject = null;
 }
}

function doMove() {
 var el, xPos, yPos, str, xMin, yMin;
 xMin = 8;
 yMin = 8;

 el = getReal(event.srcElement, "className", "resizeMe");
 //根据鼠标的位置设置箭头方向
 if (el.className == "resizeMe") {
  str = getDirection(el);
  if (str == "") str = "default";
  else str += "-resize";
  el.style.cursor = str;
 }
 
 

 if(theobject != null) {
     theobject.endwidth=window.event.clientX;
  window.event.returnValue = false;
  window.event.cancelBubble = true;
 }
}

//el:设置或获取触发事件的对象
//el.tagName 获取对象的标签名称
//el.className:设置或获取对象的类,class属性的值
//el.parentElement:获取对象层次中的父对象。
//-----------------------------------------//
//getReal(el, type, value)
//el:为对象
//type:为对象中的属性名称
//vlaue:为此属性的值
//返回值:
//如果对象不是body:核对对象的type属性是否对于value
//
//
//
//-----------------------------------------//
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}

document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
</SCRIPT>
<script language="javascript">

function getposition(obj)
{
var num=0;
while(obj)
{
num=num+obj.offsetLeft;
obj=obj.offsetParent;
}
return num;
}


</script>
<table class=resizeMe  border="1" >
   <form name="form1"><tr>
    <td class="hh"location="1">列 &nbsp;&nbsp;<input  type="hidden" name="textfield" value="1" /> </td>
    <td class="hh" location="2">列 &nbsp;&nbsp;<input  type="hidden" name="textfield" value="2" /></td>
    <td  class="hh" location="3">列 &nbsp;&nbsp;<input  type="hidden" name="textfield" value="3" /> </td>
    <td  class="hh" location="4">列 &nbsp;&nbsp;<input  type="hidden" name="textfield" value="4" /></td>
    <td  class="hh"  location="5">列&nbsp;&nbsp;<input  type="hidden" name="textfield" value="5" /> </td>
  </tr>
  </form>
  <form name="form2">
  <tr>
    <td   ><input    type="text" size="20" name="lie1" value="20" /></td>
    <td><input    type="text" size="20" name="lie2" value="20" /></td>
    <td ><input    type="text" size="20" name="lie3" value="20" /></td>
    <td ><input    type="text" size="20" name="lie4" value="20" /></td>
    <td ><input    type="text" size="20" name="lie5" value="20" /></td>
 </tr>
  <tr>
     <td   ><input    type="text" size="20" name="lie1" value="20" /></td>
    <td><input    type="text" size="20" name="lie2" value="20" /></td>
    <td ><input    type="text" size="20" name="lie3" value="20" /></td>
    <td ><input    type="text" size="20" name="lie4" value="20" /></td>
    <td ><input    type="text" size="20" name="lie5" value="20" /></td>
 </tr>
  <tr>
     <td   ><input    type="text" size="20" name="lie1" value="20" /></td>
    <td><input    type="text" size="20" name="lie2" value="20" /></td>
    <td ><input    type="text" size="20" name="lie3" value="20" /></td>
    <td ><input    type="text" size="20" name="lie4" value="20" /></td>
    <td ><input    type="text" size="20" name="lie5" value="20" /></td>
 </tr>
 
 </form>
 
</table>
 
</body>
</html>

阅读更多
换一批

没有更多推荐了,返回首页