鼠标拖动表格中的数据，表格美化（系列二）

最新推荐文章于 2023-07-13 17:21:13 发布
最新推荐文章于 2023-07-13 17:21:13 发布
阅读量216 收藏
点赞数
分类专栏： javaScript 文章标签： 生物 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heisetoufa/article/details/83265593
版权
效果图：表格上边的文字可以通过鼠标的拖拽到下边的表格内


代码： 

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
  <HTML>   
    <HEAD>   
      <title>WebForm2</title>   
      <meta   name="GENERATOR"   content="Microsoft   Visual   Studio   .NET   7.1">   
      <meta   name="CODE_LANGUAGE"   content="Visual   Basic   .NET   7.1">   
      <meta   name="vs_defaultClientScript"   content="JavaScript">   
      <meta   name="vs_targetSchema"   content="http://schemas.microsoft.com/intellisense/ie5">   
      <SCRIPT   language="javascript">   

  /*--------全局变量-----------*/   
  var   x0,y0,x1,y1,isreplace;   
  var   movable   =   false;   
  var   preCell   =   null;   
  var   normalColor   =   null;   
  var   preColor   =   "lavender";   
  var   endColor   =   "#FFCCFF";   
  /*--------全局变量-----------*/   

  //得到控件的绝对位置   
  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;   
  }   

  //当鼠标拖动某一个td时,显示临时图层   
  function   showDiv(ischange)   
  {   
    var   ischange=ischange   
    isreplace=ischange                                             //得到触发该事件的是哪个table来决定是否替换   
    var   obj   =   event.srcElement;                           //得到触发该事件的对象,也就是对触发该事件对象的一个引用   
    var   pos   =   new   Array();                                     //定义一个数组用来存放位置参数   
    //获取过度图层   
    var   oDiv   =   document.all.tempDiv;                 //对临时层的一个引用   
    if(obj.tagName.toLowerCase()   ==   "td")   
    {   
      obj.style.cursor   =   "hand";                           //当按下鼠标时,鼠标模式改成手型   
      pos   =   getPos(obj);                                           //得到该td的位置(包括横纵坐标)   
      //计算中间过度层位置，赋值   
      oDiv.style.width   =   obj.offsetWidth;         //得到td的宽,赋值给临时层tempDiv   
      oDiv.style.height   =   obj.offsetHeight;     //得到td的高,赋值给临时层tempDiv   
      oDiv.style.top   =   pos[0];                               //得到该td的纵坐标的位置,赋值给临时层tempDiv   
      oDiv.style.left   =   pos[1];                             //得到该td的横坐标的位置,赋值给临时层tempDiv   
      oDiv.innerHTML   =   obj.innerHTML;                 //得到该td的文本显示内容,赋值给临时层tempDiv   
      oDiv.style.display   =   "";                               //显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个紫红色的框框   
      x0   =   pos[1];   
      y0   =   pos[0];   
      x1   =   event.clientX;                                         //返回当前鼠标所在位置的横坐标   
      y1   =   event.clientY;                                         //返回当前鼠标所在位置的纵坐标     
      //记住原td   
      normalColor   =   obj.style.backgroundColor;     //得到触发该事件对象的背景色   
      obj.style.backgroundColor   =   preColor;           //改变触发该事件的对象的背景色   
      preCell   =   obj;                                                         //赋值给另外一个空对象(属公共的变量)   

      movable   =   true;                                                       //标识有td在移动   
    }   
  }   
  //当拖动一个td时,经过其他td时所处理的事件   
  function   dragDiv()   
  {   
    if(movable)                                                                     //当上面的showDiv事件为真时,执行下面的代码   
    {   
      var   oDiv   =   document.all.tempDiv;                         //对临时层的一个引用   
      var   pos   =   new   Array();                                             //定义一个存放位置的数组   
      oDiv.style.top   =   event.clientY   -   y1   +   y0;       //定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标   
      oDiv.style.left   =   event.clientX   -   x1   +   x0;     //定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标   
      var   oTable   =   document.all.tb2;     
      //根据条件显示不同背景色   
      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]   !=   preCell)   
              oTable.cells[i].style.backgroundColor   =   endColor;             
          }   
          else   
          {   
            if(oTable.cells[i]   !=   preCell)   
              oTable.cells[i].style.backgroundColor   =   normalColor;   
          }   
        }   
      }         
    }   
  }   

  function   hideDiv()   
  {   
    if(movable)   
    {   
      var   oTable   =   document.all.tb2;   
      var   pos   =   new   Array();     
      if(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"   &&   oTable.cells[i].style.backgroundColor.toLowerCase()=="#ffccff")   
            {   
              if(isreplace=="2"){                 //如果是下面表格内部拖动,则内容互换   
                  preCell.innerHTML   =   oTable.cells[i].innerHTML;   
              }   
        //当下面的td中有内容时,则上面的课程将与下面的课程互换----注意:这个if和下面紧接着的if位置不能互换.   
        if(isreplace=="1"   &&   oTable.cells[i].innerText.length   >   1){               
            preCell.innerHTML=   oTable.cells[i].innerHTML   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
        //当下面的td中没有内容时,则上面的课程将被移除----注意:这个if和上面紧接着的if位置不能互换.   
        if(isreplace=="1"   &&   oTable.cells[i].innerText.length   ==   1){                 
            preCell.innerHTML=""   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   

        if(isreplace=="2"){   
            oTable.cells[i].innerHTML   =   document.all.tempDiv.innerHTML;   
        }   
              //清除原单元格和目标单元格的样式   
              preCell.style.backgroundColor   =   normalColor;   
              oTable.cells[i].style.backgroundColor   =   normalColor;   
              oTable.cells[i].style.cursor   =   "";   
              preCell.style.cursor   =   "";   
              preCell.style.backgroundColor   =   normalColor;   
            }   
          }   
        }   
      }   
      movable   =   false;   
      //清除提示图层   
      document.all.tempDiv.style.display   =   "none";       
    }   
  }   
  //在页面提交时触发下面的事件,给隐藏字段赋值   
  function   getvalue(){   
      for(var   i=0;   i<oTable.cells.length;   i++){   
        document.all["kc_name"+i].value   =   oTable.cells[i].innerHTML;   
        //alert(document.all["kc_name"+i].value)   
      }   
  }   
  document.onmouseup   =   function()   
  {     
    hideDiv();   
    var   oTable   =   document.all.tb2;   
    for(var   i=0;   i<oTable.cells.length;   i++)   
      oTable.cells[i].style.backgroundColor   =   normalColor;   
  }   

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

  </SCRIPT>
  </HEAD>   
    <body   MS_POSITIONING="GridLayout">   
    <form   name="Form1"   method="post"   action="WebForm11.aspx"   id="Form1">   
          <table   id="tb1"   cellspacing="0"   onMouseDown="showDiv('1')"   onselectstart="return   false;"   border="0"   style="width:200px;border-collapse:collapse;BORDER-RIGHT:black   1px   solid;   BORDER-TOP:black   1px   solid;   FONT-SIZE:13px;   BORDER-LEFT:black   1px   solid;   BORDER-BOTTOM:black   1px   solid">   
    <tr>   
      <td>语文</td>           
    </tr>   
    <tr>   
      <td>数学</td>   
    </tr>   
    <tr>   
      <td>英语</td>   
    </tr>   
    <tr>   
      <td>物理</td>   
    </tr>   
    <tr>   
      <td>化学</td>   
    </tr>   
    <tr>   
      <td>地理</td>   
    </tr>   
    <tr>   
      <td>生物</td>   
    </tr>   
    <tr>   
      <td>历史</td>   
    </tr>   
    <tr>   
      <td>政治</td>   
    </tr>   
  </table>   
    <TABLE   style="BORDER-RIGHT:black   1px   solid;   BORDER-TOP:black   1px   solid;   FONT-SIZE:13px;   BORDER-LEFT:black   1px   solid;   BORDER-BOTTOM:black   1px   solid"   
          id="tb2"   onMouseDown="showDiv('2')"   onselectstart="return   false;"   cellpadding="0"   cellspacing="1"   
          bordercolor="#ffccff"   bgcolor="#999999"   width="200">   
          <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
    <tr   align="center"   width="50">   
              <td   height="22"   bgcolor="#FFFFFF">    
        </td>   
          </tr>   
      <input   type="hidden"   name="kc_name0"   value="">   
      <input   type="hidden"   name="kc_name1"   value="">   
      <input   type="hidden"   name="kc_name2"   value="">   
      <input   type="hidden"   name="kc_name3"   value="">   
      <input   type="hidden"   name="kc_name4"   value="">   
      <input   type="hidden"   name="kc_name5"   value="">   
      <input   type="hidden"   name="kc_name6"   value="">     
      <input   type="hidden"   name="kc_name7"   value="">   
      <input   type="hidden"   name="kc_name8"   value="">   
      </TABLE>   
            <DIV   id="tempDiv"   onselectstart="return   false"   style="cursor:hand;position:absolute;   border:1px   solid   black;   background-color:#FFCCFF;   display:none">   
        </DIV>   
      </form>   
    </body>   
  </HTML>


黑色头发 [url=../../../]http://heisetoufa.iteye.com[/url]
limon758
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
兼容主流浏览器的纯JS动态拖动表格实现行列内容交换
11-14
项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一个控件，结果简单的一个拖动交换行，就要引入七八个js library，太麻烦了。就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。
js实现表格列的位置拖拽
榴莲不好吃的专栏
10-09 8651
转载请注明出处：http://blog.csdn.net/sllailcp/article 公司突然出了新需求，拖拽表格的列到指定的列，去网上找了下，没有合适产品需求的，就自己写了个小功能。 具体功能为：拖拽当前列当想要的位置,向左拖动，向前添加，向右拖动，向后添加 先看下具体效果图: 以下是js代码 $(function () { var d1 = new d...
用 JavaScript 实现，拖动元素在表格 (一个范围) 内移动
草木红的博客
06-07 1078
基于 jQuery 可以让一个元素在一个范围内拖动
JS实现列表数据左右、上下移动功能
简约人生的博客
04-13 9628
本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧；另一种是数据添加到右边的同时从左边移除，从右边移除的同时向左边追加，并对右侧列表数据实现了上下移动功能。 一、效果图 进行左右移动时，选定一项或多项点击添加或移除(按住shift或ctrl可以多选)，上下移动不支持多选...
日常随笔：JS实现将一个元素从一个标签中移动到另一个标签中的简单方法
qq_24724109的博客
12-24 3713
使用 append 方法完成页面内元素的迁移 问题描述 要将一个元素target从一个标签(div1)中移动到另外一个标签(div2)中，应该怎么做呢 一般做法：先将target从div1中保存并从div1中将target删除，然后在div2中添加该元素 特殊做法: 今天发现直接append该target元素!!! 实验验证 <!DOCTYPE html> <html la...
财务人员常用的Excel表格使用技巧.docx
11-15
4. **填充条纹**：美化表格时，可以在单元格内输入“*”或“~”，选中单元格并拖动鼠标，然后通过“单元格格式”中的“对齐”选项卡设置水平对齐为“填充”，即可创建条纹效果。 5. **多工作表同步输入**：需要在多...
js表格上下左右拖动代码.zip
最新发布
10-10
标题中的"js表格上下左右拖动代码.zip"表明这是一个包含JavaScript和CSS实现的表格拖动功能的代码包。这个代码可能适用于那些希望在网页中创建交互性更强、用户可自由调整布局的表格应用的开发者。描述中提到"非常...
Word2021文档表格中怎么合并单元格.docx
09-27
此外，在 Word 2021 文档表格中，用户还可以使用其他功能来美化表格，例如添加表格样式、插入表格标题、设置表格边框等。这些功能可以帮助用户快速创建出美观的表格，并且提高数据的可读性。 在实际工作中，合并...
可拖动、排序的表格
09-13
通常，开发者会监听鼠标的`mousedown`、`mousemove`和`mouseup`事件，当用户点击并拖动表格行时，这些事件会被触发。在拖动过程中，JavaScript会更新表格的DOM结构以反映新的排序顺序。同时，它还会处理边界检测，...
一个类似于Excel的表格实现
03-29
这里提到的"AsExcelDemo"可能是用编程语言（如JavaScript、Python、Java等）实现的一个简单的表格组件或库，用于在网页或应用程序中展示数据，模拟Excel的界面和功能。 首先，我们来探讨一下如何在Web应用中实现...
html 拖拽选择表格,JS拖动选择table里的单元格完整实例【基于jQuery】
weixin_29158047的博客
06-03 977
本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考，具体如下：用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。www.gxlcms.com JS拖动选择table里的单元格.table-container {width: 100%;overflow-y: auto;_overflow: auto;margin: 0 0 1em;ba...
vue js实现表格行拖拽
qq_42661587的博客
06-29 873
【代码】vue js实现表格行拖拽。
类似于excel功能的可拖拽的可编辑表格
zhangjing1019的博客
07-24 1890
一款可编辑表格，可以自定义表格内容和格式，表格中有常用的input，select，datePIcker，selectTree等，可以拖拽表格，类似于excel拖拽赋值的功能，并对表格进行实时校验 使用了vue和render函数和jsx写法 贴一个源码地址https://github.com/zhjing1019/CanEditGrid 组件的使用 1、组件 ...
类似excel一样拖动选择table单元格的javascript实现 2W个单元格 的IE效率 怎么做更高
u010496553的专栏
12-10 1275
如题 怎么做个 类似excel一样拖动选择table单元格的javascript实现 2W个单元格 的IE效率更高 2W的单元格批量选择 不加ID 效率IE6超级慢
JavaScript实现简单拖拽功能
木竹的博客
02-23 212
javascript实现简单的拖拽功能,以及封装拖拽功能的兼容性方法
JavaScript仿Excel表格演示
MaWenWu专栏
11-07 1564
  JavaScript仿Excel表格演示- /var toBeColor = "#F8F9FC";var backColor = "#FFFFFF";var tableId = "tbData";var table;var tbody;var divShowInput;window.onload=function(){beginListe
javascript+css仿excel表格效果
cyclone0a0a01的博客
10-18 534
  　　这是excel的界面，选中一个单元格后，该单元格，以及同行、同列的第一个单元格都呈现出特殊样式，很好地提示了用户。接下来用javascript和css实现类似效果。 　　关键的css如下：   css代码 td {border-top:3px solid #FFFFFF;border-bottom:2px solid #B3DE94;padding:9px;}td.hover...
js拖动元素从一个位置到另一个位置（vuedraggable）的使用
reembarkation的博客
08-19 2343
vue项目中拖拽元素从一个div到另外一个div中的实现
vue3+element+sortablejs实现table表格 行列动态拖拽
qq_44871531的博客
07-13 2076
vue3+element+sortablejs实现table表格 行列动态拖拽,判断要拖动的行能不能拖动并放置到新位置,拖动时,判断能不能拖动
《办公自动化简明教程(Office+2007版)》第7章.ppt
06-09
"《办公自动化简明教程...本章内容详细介绍了在Office 2007中创建、编辑和美化表格的基本操作，旨在帮助用户提升办公效率，更有效地组织和展示数据。通过学习这些技巧，用户能够灵活运用表格来满足各种办公需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值