`
jslfl
  • 浏览: 321156 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JS动态拖动表格实现列内容的交换

    博客分类:
  • web
阅读更多
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>JS动态拖动表格实现列内容的交换</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 yzh 2002.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在,id为指定
* 请大家引用时保留这段作者声明,此代码为开源代码;使用不受限制,欢迎大家采用本人所写JS动态拖动表格实现代码。
*/

/*--------全局变量-----------*/
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>
</TABLE>
</BODY>
</HTML>

转自http://xiaoyaolong.iteye.com/blog/1577919
分享到:
评论

相关推荐

    兼容主流浏览器的纯JS动态拖动表格实现行列内容交换

    项目开发中需要用到一个拖动交换表格的功能,上网搜到雅虎的一...就自己综合网上资源写了一个可兼容IE,firefox,Chrome,Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。

    javascript 拖动表格行和列

    在JavaScript编程中,拖动表格行和列...总的来说,实现JavaScript拖动表格行和列的功能需要理解DOM操作、事件处理、CSS定位以及可能的第三方库的运用。通过实践和调试,你可以创造出更加动态和交互丰富的Web表格应用。

    table拖动交换表格内容

    此外,描述中提到的“拖动表格列大小”功能,可能涉及到`&lt;th&gt;`元素(表头单元格)的拖动调整宽度。这通常通过监听`mousedown`、`mousemove`和`mouseup`事件,结合`resizer`元素(用于拖动的把手)和CSS样式实现。...

    鼠标拖动实现表格行交换.docx

    交换行序号(通过修改第一列的内容实现),然后交换两行的`innerHTML`,这将更新整个行的内容。最后,清空`downRow`,结束此次操作。 为了使行交换功能更加完善,可以考虑添加一些额外的功能,比如处理边界条件(如...

    JS可拖动排序的表格

    JS(JavaScript)作为一种强大的客户端脚本语言,被广泛用于实现各种动态效果和用户交互,其中包括可拖动和排序的表格功能。这种功能允许用户通过鼠标拖放操作来改变表格中行或列的顺序,提升数据管理的便捷性。下面...

    可拖动行列的表格

    - 在实现可拖动行列的表格时,首先需要一个合适的数据结构来存储表格中的信息。通常,这会是一个二维数组或类似的结构,其中每一行和列对应数组的一个元素。 - 表格的行列信息需要包含数据、位置(行号和列号)...

    table的td整列拖动交换以及重新排列位置

    本文将详细讲解如何实现“table的td整列拖动交换以及重新排列位置”的JavaScript技术,帮助你为用户提供更加直观、便捷的操作体验。 首先,我们需要了解HTML中的`&lt;table&gt;`元素,它由`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)...

    easyui-表格拖动的实现

    在"easyui-表格拖动的实现"这个主题中,我们将深入探讨如何利用 EasyUI 的功能实现表格数据的拖放操作(Drag and Drop,简称DND)。 1. **EasyUI 的 Drag and Drop 功能**: EasyUI 支持 DND,允许用户通过鼠标...

    javascript 拖动表格行实现代码.docx

    JavaScript 实现拖动表格行的功能是一项常见的交互设计,可以提高用户在操作数据时的便捷性。以下是一个关于如何实现这一功能的详细解释: 首先,我们要理解实现拖动表格行的基本思路。当用户按下鼠标并开始拖动时...

    table列排序、列拖动、列宽度变化、行交换

    用户可以通过手动拖动列边框来改变宽度,或者采用自动调整列宽的机制,让表格更适应屏幕尺寸或数据内容。 最后,**行交换**功能则允许用户交换表格内的行,这对于数据对比或整理非常有用。例如,在一个待办事项列表...

    js表格列拖动排序代码

    这个功能允许用户通过鼠标长按并拖动表格的列头来调整列的顺序,以满足个性化查看数据的需求。这种效果通常应用于数据管理、数据分析或者任何需要展示多列信息的网页应用中。 在“js表格列拖动排序代码”中,主要...

    Repeater+Jquery实现表格列的隐藏,拖拉,位置交换

    为了实现列的位置交换,我们需要记录拖动的列信息,并在释放时更新表格的结构,同时更新后台数据的对应关系,确保数据的正确性。 在实现这些功能时,需要注意兼容性和性能优化。例如,使用事件委托来减少事件处理器...

    基于EXT2.0.2表格间数据拖拽

    DragDrop组件允许用户将元素从一个位置拖动到另一个位置,而DragDropGroup则使得多个DragDrop对象能够相互交互,例如在不同的表格之间进行数据交换。 首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的...

    拖动表头改变栏位顺序

    6. **同步数据源**:如果表格的数据是动态绑定的,比如从服务器获取,那么改变栏位顺序后,数据源也需要相应更新,以保持与视图的一致性。 7. **结束拖动**:最后,在mouseup事件中,清除拖动状态,移除视觉效果,...

    实现table表格可按行拖拽,按列排序,并可以保存排序后的结果

    "实现table表格可按行拖拽,按列排序,并可以保存排序后的结果"是一个常见的需求,尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    在本主题中,我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能,适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计,允许用户通过鼠标拖动来改变元素的顺序。这种功能在...

    实现可改变列宽度的表格、还可以交换列位置、排序登功能

    本文将深入探讨如何实现一个可改变列宽度、交换列位置以及排序功能的表格。这些特性能够极大地提升用户在浏览和操作数据时的便捷性和舒适度。 首先,我们要关注的是**可改变列宽度**的功能。在网页上,这通常通过...

    js行拖动,div拖动,图片拖动

    综上所述,实现js行拖动、div拖动和图片拖动的关键在于理解鼠标事件和元素定位。使用Sortable这样的库可以简化开发,提供更多的功能和定制选项。在实际应用中,应根据项目需求选择合适的实现方式,确保拖放操作的...

    js拖拽Table表格列排序.rar

    本文将详细讲解如何实现JS拖拽Table表格列排序的功能,并结合提供的"js拖拽Table表格列排序.rar"文件进行解析。 首先,我们需要理解HTML中的Table结构。一个基本的HTML Table由`&lt;table&gt;`标签开始,内部包含`&lt;tr&gt;`...

    javascript 拖动表格行实现代码

    通过上述知识点,我们了解到实现JavaScript拖动表格行需要对DOM操作有一定的了解,包括事件处理、节点操作和兼容性处理等。通过合理利用原生JavaScript API,可以实现一个高效且用户友好的拖动交互体验。在实际开发...

Global site tag (gtag.js) - Google Analytics