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

最新推荐文章于 2024-10-10 09:56:47 发布

feirne2004

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： null input function class javascript distance

本文链接：https://blog.csdn.net/feirne2004/article/details/601879

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<!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>

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 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">列   <input type="hidden" name="textfield" value="1" />　</td>
    <td class="hh" location="2">列　  <input type="hidden" name="textfield" value="2" /></td>
    <td class="hh" location="3">列   <input type="hidden" name="textfield" value="3" /> </td>
    <td class="hh" location="4">列　  <input type="hidden" name="textfield" value="4" /></td>
    <td class="hh" location="5">列  <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>