table2列数据进行互换[js]

最新推荐文章于 2021-09-17 11:07:56 发布

gamebox1

最新推荐文章于 2021-09-17 11:07:56 发布

阅读量573

点赞数

分类专栏： javascript 文章标签： table function layer fun exchange div

本文链接：https://blog.csdn.net/superherosk123/article/details/3707125

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
<table border=1>
<th>
<tr style="background-color:blue;display:block;cursor:pointer">
<td οnmοusedοwn="fun(this)">t1</td>
<td οnmοusedοwn="fun(this)">t2</td>
<td οnmοusedοwn="fun(this)">t3</td>
</tr>
</th>
<tbody>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
</tbody>
</table>
<html>
<script type="text/javascript">
/** ie7下完成!
* 思路: 将table内的2列互换数据,
1.当鼠标按下未松开的时候,根据一个cell 获取 row ,然后获取到 table对象{
2.生成一个临时div,储存将要呼唤数据列的标题!
3.当鼠标按下为放松并且开始移动的时候{
  1.获取准备要换数据的列!event.srcElement,并移动div!
  当鼠标松开时{
   1.判断鼠标方式那一刻的坐标是否到达要换数据列的中心偏后处!如果是则交互2列的数据!
   否:无操作
  }
}
}
*/
//获取对象距离浏览器左侧(去除边界)的宽度
function getAbsolutePosition(obj){
  var pos=obj.clientLeft+obj.offsetLeft;
  while(obj=obj.offsetParent){
   pos+=obj.clientLeft+obj.offsetLeft;
  }
  pos-=document.body.clientLeft;
  return pos;
}
//获取对象的宽度
function getWidth(obj){
  return obj.clientWidth;
}
//交互2列的数据
function exchange(table,exIndex,curIndex){
  var len=table.rows.length;
  for(var j=0;j<len;j++){
   var row=table.rows[j];
   if(row.cells.length>1){
    var tmp=row.cells[exIndex].innerHTML;
     row.cells[exIndex].innerHTML=row.cells[curIndex].innerHTML;
     row.cells[curIndex].innerHTML=tmp;
   }
  }
}
//核心
function fun(cell){
  var row=cell.parentElement;
  var table=row.parentElement;
  while(table.tagName!="table".toUpperCase()){
   table=table.parentElement;
  }
  var body=document.body;

  //不可选择
  cell.onselectstart=function(){return false;};

  var x=event.clientX;
  var y=event.clientY;
  var width=cell.clientWidth;
  var height=cell.clientHeight;
  var layer=createLayer(x,y,width,height,cell.innerHTML);
   body.appendChild(layer);
   layer.style.display="";
  row.οnmοusemοve=function(){
   if(event.button==1){
    layer.style.left=event.clientX;
    layer.style.top=event.clientY;
    var curCell=event.srcElement;
    var width=getWidth(curCell); // cell宽度
    var pos=getAbsolutePosition(curCell); //获取绝对左侧坐标
    var x=event.clientX;
    row.οnmοuseup=function(){
     if(x>=(width/2)+pos){ //在当前cell的中点之后处,
      var curIndex=curCell.cellIndex;
      var exIndex=cell.cellIndex;
      exchange(table,exIndex,curIndex);
     }
    }
   }
  }
  //清场
  body.οnmοuseup=function(){
   if(body.contains(layer)){
    //清空
    body.removeChild(layer);
   }
  }

}
//制造层
function createLayer(x,y,width,height,content){
   var layer=document.createElement("div");
   layer.style.zIndex=2;
   layer.style.position="absolute";
   layer.style.display="none";
   layer.style.backgroundColor="red";
   layer.style.left=x;
   layer.style.top=y;
   layer.style.width=width;
   layer.style.height=height;
   layer.innerHTML=content;
   return layer;
}
</script>

gamebox1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
table2列数据进行互换[js]

t1 t2 t3 b1b2b3 b1b2b3 b1b2b3 b1b2b3 b1b2b3 /** ie7下完成!* 思路: 将table内的2列互换数据,1.当鼠标按下未松开的时候,根据一个cell 获取 row ,然后获取到 table对象{ 2.生成一个临时div,储存将要呼唤数据列的标题! 3.当鼠标按下为放松并且开始移动的时候{ 1.获取准备要换数据的列!event
复制链接

扫一扫