| 网站首页 | 硬件维修 | 应用学院 | 网络组建 | 网站制作 | 菜鸟黑客 | 编程之道 | 数码大全 | 娱乐休闲 | 软件下载 | 在线视频 | 请您留言 | 技术论坛 | 
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
  • HTML语言剖析(七)表格标记

  • 鼠标在文本上移动时层的显示…

  • 制作三维表格效果

  • 几个对图形进行动态处理的dh…

  • 简单实用的网页表格特效

  • 使用Web标准建站第11天:不用…

  • HTML中的表格元素

  • HTML中的表格元素

  • 表格对决CSS--一场生死之战

  • 改变浏览者的鼠标型状

  • Q
    您现在的位置: 我是IT人 >> 网站制作 >> 网页设计 >> HTML >> 文章正文
    用鼠标拖动表格进行排序         
    用鼠标拖动表格进行排序
    作者:网络 文章来源:转载 点击数: 更新时间:2006-1-4
    [ 字体:缩小 正常 放大 | 双击自动滚屏 ]
    请选择合适的字体颜色:

    <script language="javascript">
      var beginMoving=false;
    function MouseDownToMove(obj){
     obj.style.zIndex=1;
     obj.mouseDownY=event.clientY;
     obj.mouseDownX=event.clientX;
     beginMoving=true;
     obj.setCapture();
    }

    function MouseMoveToMove(obj){
        if(!beginMoving) return false;
     obj.style.top = (event.clientY-obj.mouseDownY);
     obj.style.left = (event.clientX-obj.mouseDownX);
    }
    function MouseUpToMove(obj){
     if(!beginMoving) return false;
     obj.releaseCapture();
     obj.style.top=0;
     obj.style.left=0;
     obj.style.zIndex=0;
     beginMoving=false;
     var tempTop=event.clientY-obj.mouseDownY;
     var tempRowIndex=(tempTop-tempTop%25)/25;
     if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
     else tempRowIndex=tempRowIndex+obj.rowIndex;
     if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
     obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
    }

    </script>
    用鼠标移动TR<br> 
      <TABLE WIDTH="300" BORDER="1" >
       
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
       <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR>

    [1] [2] 下一页  

    文章录入:54iter    责任编辑:54iter 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 关于我们 | 友情链接 | 版权申明 |