一个对表格进行拖拽来交换单元格数据的脚本^_^

原创 2004年08月31日 19:09:00

对表格进行拖拽来交换单元格的数据,呵呵,拷贝下来试试看吧 : )

 

<!-- 欢迎转载,请保留作者及其出处,谢谢 -->
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
 * created by LxcJie 2004.4.12
 * 可以实现表格内容的内部拖动
 * 确保中间过度层的存在,id为指定
 */
 
/*--------全局变量-----------*/
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";
/*--------全局变量-----------*/

function DragedTable(tableId)
{
    dragedTable_tableId = tableId;
    var oTempDiv = document.createElement("div");
    oTempDiv.id = dragedTable_movedDiv;
    oTempDiv.onselectstart = function(){return false};
    oTempDiv.style.cursor = "hand";
    oTempDiv.style.position = "absolute";
    oTempDiv.style.border = "1px solid black";
    oTempDiv.style.backgroundColor = dragedTable_endColor;
    oTempDiv.style.display = "none";
    document.body.appendChild(oTempDiv);
    document.all(tableId).onmousedown = showDiv;
}

//得到控件的绝对位置
function getPos(cell)
{
    var pos = new Array();
    var t=cell.offsetTop;
    var l=cell.offsetLeft;
    while(cell=cell.offsetParent)
    {
        t+=cell.offsetTop;
        l+=cell.offsetLeft;
    }
    pos[0] = t;
    pos[1] = l;
    return pos;
}

//显示图层
function showDiv()
{
    var obj = event.srcElement;
    var pos = new Array(); 
    //获取过度图层
    var oDiv = document.all(dragedTable_movedDiv);
    if(obj.tagName.toLowerCase() == "td")
    {
        obj.style.cursor = "hand";
        pos = getPos(obj);
        //计算中间过度层位置,赋值
        oDiv.style.width = obj.offsetWidth;
        oDiv.style.height = obj.offsetHeight;  
        oDiv.style.top = pos[0];
        oDiv.style.left = pos[1];
        oDiv.innerHTML = obj.innerHTML;
        oDiv.style.display = "";
        dragedTable_x0 = pos[1];
        dragedTable_y0 = pos[0];
        dragedTable_x1 = event.clientX;
        dragedTable_y1 = event.clientY;
        //记住原td
        dragedTable_normalColor = obj.style.backgroundColor;
        obj.style.backgroundColor = dragedTable_preColor;
        dragedTable_preCell = obj;
       
        dragedTable_movable = true;
    }
}
function dragDiv()
{
    if(dragedTable_movable)
    {
        var oDiv = document.all(dragedTable_movedDiv);
        var pos = new Array();
        oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
        oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
        var oTable = document.all(dragedTable_tableId);
        for(var i=0; i<oTable.cells.length; i++)
        {
            if(oTable.cells[i].tagName.toLowerCase() == "td")
            {
                pos = getPos(oTable.cells[i]);
                if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
                   && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
                {
                    if(oTable.cells[i] != dragedTable_preCell)
                        oTable.cells[i].style.backgroundColor = dragedTable_endColor;                  
                }
                else
                {
                    if(oTable.cells[i] != dragedTable_preCell)
                        oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
                }
            }
        }          
    }
}

function hideDiv()
{
    if(dragedTable_movable)
    {
        var oTable = document.all(dragedTable_tableId);
        var pos = new Array(); 
        if(dragedTable_preCell != null)
        {
            for(var i=0; i<oTable.cells.length; i++)
            {          
                pos = getPos(oTable.cells[i]);
                //计算鼠标位置,是否在某个单元格的范围之内
                if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
                    && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
                {
                    if(oTable.cells[i].tagName.toLowerCase() == "td")
                    {
                        //交换文本
                        dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
                        oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
                        //清除原单元格和目标单元格的样式
                        dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                        oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
                        oTable.cells[i].style.cursor = "";
                        dragedTable_preCell.style.cursor = "";
                        dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                    }
                }
            }
        }
        dragedTable_movable = false;
        //清除提示图层
        document.all(dragedTable_movedDiv).style.display = "none";     
    }
}

document.onmouseup = function()
{  
    hideDiv();
    var oTable = document.all(dragedTable_tableId);
    for(var i=0; i<oTable.cells.length; i++)
        oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}

document.onmousemove = function()
{
    dragDiv();
}

/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
 //注册可拖拽表格
 new DragedTable("tableId");
}
</script>
</HEAD>
<BODY oncontextmenu="return false;" onload="init()">
<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
  <TR>
    <TH colspan="4" style="">拖动交换单元格内容</TH>
  </TR> 
  <TR>
    <TD>Java</TD>
    <TD>Java One </TD>
    <TD>JBuilder</TD>
    <TD>Stuts</TD>
  </TR>
  <TR>
    <TD>C++</TD>
    <TD>Visual Studio</TD>
    <TD>Office</TD>
    <TD>Windows</TD>
  </TR>
  <TR>
    <TD>PhotoShop</TD>
    <TD>Java</TD>
    <TD>Illustrator</TD>
    <TD>PageMaker</TD>
  </TR>
  <TR>
    <TD>Cartoon</TD>
    <TD>Telephone</TD>
    <TD>China</TD>
    <TD>USA</TD>
  </TR>
  <TR>
    <TD>Java</TD>
    <TD>Java One </TD>
    <TD>JBuilder</TD>
    <TD>Stuts</TD>
  </TR>
  <TR>
    <TD>C++</TD>
    <TD>Visual Studio</TD>
    <TD>Office</TD>
    <TD>Windows</TD>
  </TR>
  <TR>
    <TD>PhotoShop</TD>
    <TD>Flash</TD>
    <TD>Illustrator</TD>
    <TD>PageMaker</TD>
  </TR>
  <TR>
    <TD>Cartoon</TD>
    <TD>Telephone</TD>
    <TD>China</TD>
    <TD>USA</TD>
  </TR>
</TABLE>
</BODY>
</HTML>

可拖拽表格的swing实现(通过拖拽表格的行,实现交换行位置的交换)

swing里的table可以通过setUI(? extends  BasicTableUI )这个方法来实现对表的外观的一些控制,如下代码实现了简单的例子: 1.测试类: import java.a...
  • kingpengzhen
  • kingpengzhen
  • 2014年12月19日 13:13
  • 628

JS组件系列——Bootstrap Table 表格行拖拽

一、业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table...
  • liaozhongping
  • liaozhongping
  • 2015年10月31日 12:21
  • 2792

基于bootgrid,利用HTML5拖拽实现表格列互换并添加至localStorage

基于bootgrid,利用HTML5拖拽实现表格列互换,支持换页和刷新数据,首先找到用bootgrid加载表格数据的方法,类似下面的 function getList() { $("#grid")...
  • leiliz
  • leiliz
  • 2017年04月07日 14:09
  • 624

js实现表格列的位置拖拽

转载请注明出处:http://blog.csdn.net/sllailcp/article 公司突然出了新需求,拖拽表格的列到指定的列,去网上找了下,没有合适产品需求的,就自己写了个小功能。 具...
  • l284969634
  • l284969634
  • 2016年10月09日 13:32
  • 1377

表格拖动排序jquery-ui

转自:http://www.cnblogs.com/haitao-fan/p/3908633.html 参考原文链接: http://stackoverflow.com/questions...
  • superit401
  • superit401
  • 2016年06月29日 11:30
  • 2338

JavaScript实现多个div块之间相互拖放,交换位置(内容)

自己写的一个小页面,直接放代码。 数据源配置:配置 *{ mar...
  • wfr18314536093
  • wfr18314536093
  • 2016年09月08日 11:14
  • 2272

可拖拽GridView代码解析

可拖拽GridView的代码实现
  • chunqiuwei
  • chunqiuwei
  • 2014年11月12日 17:01
  • 6472

拖拽表格单元格,改变单元格内容

拖动 td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:defau...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2015年11月12日 21:32
  • 798

JS前端动态添加表格--包括合并指定单元格

var newRow = "";//全局变量 var pubSum=1;//计数添加记录次数 var panelTitle=$("#title").val(); var currExtBJ=""...
  • baijianjun123456
  • baijianjun123456
  • 2017年03月08日 17:47
  • 1479

jqgrid中对表格数据操作的方法

http://www.cnblogs.com/hongzai/p/3159546.html 1. getGridParam         这个方法用来获得jqGrid的选项值。它具有...
  • lijinghua1245
  • lijinghua1245
  • 2016年12月06日 09:01
  • 1409
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个对表格进行拖拽来交换单元格数据的脚本^_^
举报原因:
原因补充:

(最多只允许输入30个字)