表格列拖动在.html和.jsp中的问题

最新推荐文章于 2024-02-17 09:28:20 发布

郭小伟

最新推荐文章于 2024-02-17 09:28:20 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/guoxiaowei400/article/details/25085305

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近一周在做表格的列拖动，思路比较简单，就是先按下鼠标，触发onmousedown，计算左右td的宽度；然后移动，触发onmousemove，计算鼠标移动的位置，然后做下只能在相邻td间移动的判断，得到最后左右td的宽度；最后松开鼠标，触发onmouseup，结束移动。然而在做的过程中遇到了很多细节性的问题，幸亏有个高手指点，不然就做不出来了，在此感谢那个不知道名字的大哥的指导，先整理一下几点要注意的地方。

1.首先是引入一张图片，当做事件的触发点，这样可以根据图片的移动距离，计算td的改变宽度；

2.怎样使图片优先文字显示，因为假如不这样的话，拖到td最小时，右边的就只能把鼠标放到文字的下面才能够拖动，在IE中设置#insidetable td{ position: relative;} .move{ position: absolute; right: 0;top: 0;}就可以实现图片显示在文字上面。

3.隐藏td中的文字#insidetable td{ text-overflow:ellipsis;overflow: hidden; white-space: nowrap;}

这样在后缀名为.html时显示拖动没问题。

4.兼容<!DOCTYPE html>类型，标准模式时，才能在所有IE版本正常运行，这个问题好奇怪，在.style.width=w后面+"px"就解决了这个问题。

5.在onmosemove判断时，这样parseInt(dragObj.parentNode.parentNode.cells[dragObj.parentNode.cellIndex+1].style.width)-t<10判断时会出现移动时停顿的现象，换成 t+10>rightCellWidth 判断就没有这个问题，可是这两个判断时一摸一样的意思，就是用rightCellWidth代替了parseInt(dragObj.parentNode.parentNode.cells[dragObj.parentNode.cellIndex+1]，现在还不知道为什么会这样子。

从html移动到jsp出现的问题

1.当把代码搬到JSP时又出现了一个问题，e一直是undefined，所以最后添加了一个var e=e || event解决移动的问题；

2.可又有一个移动td（td中的内容是汉字，空格、\等字符时）会出现换行，然后添加 #insidetable td{ word-break:keep-all;}，以为这样子就可以了，但是空格、\等符号照样换行；后来查资料说IE中的td最难解决换行的问题，就在td后面加上一个div，在css中加入：div { white-space:nowrap;}，最后解决了换行的问题（这个问题花了我很长时间才解决）。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
<style type="text/css">
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

table {
width:100%;
table-layout: fixed;
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}

#insidetable td{
   background-color:#FFFFFF;
   font-size: 12px;
   color:#000000;
   text-align:center;
   text-overflow:ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
.move{
text-align:right;
width:1px;
margin:0px;
background:#ffffff;
border:0px;
float:right;
cursor:e-resize;
}
</style>
<script language="javascript">
var lastX,watch_dog,leftCellWidth,rightCellWidth;;
var dragAble=false;
var dragObj;
var ie = (document.all) ? true : false;//是否为IE

var p_p_c_gw=function(index,o)/*取得o.parentNode.parentNode.cells的宽度*/{
if(window.ActiveXObject){
  return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth;
}else{
  return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-
  parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2;
}
}

  if(t>0) {//right
   if(t+10>rightCellWidth)
    return;
  } else {//left
   if(10-t>leftCellWidth)
    return;
  }
  p_p_p_sw(dragObj.parentNode.cellIndex,leftCellWidth+t,dragObj);
  p_p_p_sw(dragObj.parentNode.cellIndex+1,rightCellWidth-t,dragObj);
    }
}
//停止拖拽
document.οnmοuseup=function(e){
if(dragAble){
  if(dragObj.releaseCapture)
  dragObj.releaseCapture();
  else if(window.captureEvents)
  window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    dragAble=false;
}
}

</script>
</head>

<body>

  <table width="100%" align="center" id="insidetable" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6">
          <tr>

            <td width="3%" height="22">序号</td>
            <td width="6%" height="22"><img src="images/box1.gif" class="move" width="1" height="18">IP协议类型</td>
            <td width="9%" height="22"><img src="images/box1.gif" class="move" width="1" height="18">数据传输方向</td>
            <td width="10%" height="22"><img src="images/box1.gif" class="move" width="1" height="18">传输层协议类型</td>
            <td width="20%" height="22"><img src="images/box1.gif" class="move" width="1" height="18">本地IP</td>
            <td width="20%" height="22"><img src="images/box1.gif" class="move" width="1" height="18">远程IP</td>
   <td width="22%" height="22"><img src="images/box1.gif" class="move" width="1" height="18">进程名称</td>
   <td width="10%" height="22">操作时间</td>
        </tr>
  <tr>
   <td height='20'>01</td>
   <td height='20'>IPV4</td>
   <td height='20'> 数据流INPUT数据流INPUT数据流INPUT数据流INPUT数据流INPUT数据流INPUT数据流INPUT数据流INPUT数据流INPUT数据流INPUT</td>
   <td height='20'>TCP</td>
   <td height='20'>192:168:110:148 192:168:110:148 192:168:110:148</td>
   <td height='20'>180:149:156:73</td>
   <td height='20'>\6.7.0.0747\sgtool.exe \6.7.0.0747\sgtool.exe \6.7.0.0747\sgtool.exe</td>
   <td height='20'>2014-04-14 13:55:05</td>
      </tr>
   <tr>
   <td height='20'>01</td>
   <td height='20'>IPV4</td>
   <td height='20'>数据流INPUT</td>
   <td height='20'>TCP</td>
   <td height='20'>192:168:110:148</td>
   <td height='20'>180:149:156:73</td>
   <td height='20'>\6.7.0.0747\sgtool.exe</td>
   <td height='20'>2014-04-14 13:55:05</td>
      </tr>
   <tr>
   <td height='20'>01</td>
   <td height='20'>IPV4</td>
   <td height='20'>数据流INPUT</td>
   <td height='20'>TCP</td>
   <td height='20'>192:168:110:148</td>
   <td height='20'>180:149:156:73</td>
   <td height='20'>\6.7.0.0747\sgtool.exe</td>
   <td height='20'>2014-04-14 13:55:05</td>
      </tr>