javascript 移动Table(表格)的位置

最新推荐文章于 2022-11-14 15:04:38 发布
最新推荐文章于 2022-11-14 15:04:38 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 技术类 文章标签： table javascript border null function class
<html>  
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <title>JK:支持民族工业,尽量少买X货</title>  
  <style>  
  .removableObj  
  {  
  height:25;position:relative;  
  }  
  </style>  
  <script   language="javascript">  
  var   beginMoving=false;  
  var   sourceObj=null;  
  var   objectObj=null;  
  var   objectObj2=null;  
  function   MouseDownToMove(obj){  
  obj.style.zIndex=1;  
  obj.mouseDownY=event.clientY;  
  obj.mouseDownX=event.clientX;  
  beginMoving=true;  
  obj.setCapture();  
  sourceObj=obj;  
  objectObj=null;  
  }  
   
  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;  
  window.setTimeout("swapFun()",20);  
  }  
   
  function   MouseOverFun(obj)  
  {  
  if(obj==sourceObj)   return   false;  
  objectObj=obj;  
  }  
   
  function   MouseOverFun2(obj)  
  {  
  objectObj2=obj;  
  }  
   
  function   swapFun()  
  {  
  if(sourceObj!=null   &&   objectObj!=null)   objectObj.insertAdjacentElement("beforeBegin",sourceObj);  
  else   if(sourceObj!=null   &&   objectObj2!=null)   objectObj2.insertAdjacentElement("beforeEnd",sourceObj);  
  sourceObj=null;  
  objectObj=null;  
  objectObj2=null;  
  }  
  </script>  
  </head>  
   
  <body>  
   
  <table   border="1"   width="100%"   height="58">  
      <tr>  
          <td   width="34%"   valign="top"   height="46"   οnmοuseοver="MouseOverFun2(this);"   >  
              <table   border="1"   width="100%"   bgcolor="#99CCFF"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="23%">和</td>  
                      <td   width="21%">飞过海</td>  
                  </tr>  
                  <tr>  
                      <td   width="23%">　</td>  
                      <td   width="21%">　</td>  
                  </tr>  
              </table><table   border="1"   width="100%"   bgcolor="#FFCCFF"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="21%">还是</td>  
                      <td   width="35%">护身符哈</td>  
                  </tr>  
                  <tr>  
                      <td   width="21%">，</td>  
                      <td   width="35%">和是是护</td>  
                  </tr>  
              </table>  
      <table   border="1"   width="100%"   bgcolor="#00CC99"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="21%">还是</td>  
                      <td   width="9%">　</td>  
                      <td   width="35%">呵呵</td>  
                  </tr>  
                  <tr>  
                      <td   width="21%">，</td>  
                      <td   width="9%">　</td>  
                      <td   width="35%">和</td>  
                  </tr>  
              </table>  
               
          </td>  
          <td   width="32%"   valign="top"   height="52"   οnmοuseοver="MouseOverFun2(this);"   >  
      <table   border="1"   width="100%"   bgcolor="#FF0000"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="21%">还是</td>  
                  </tr>  
                  <tr>  
                      <td   width="21%">，</td>  
                  </tr>  
              </table>          
              <table   border="1"   width="100%"   bgcolor="#00FFFF"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="21%">还是</td>  
                      <td   width="35%">护身符哈</td>  
                      <td   width="21%">　</td>  
                      <td   width="23%">呵呵</td>  
                  </tr>  
                  <tr>  
                      <td   width="21%">，</td>  
                      <td   width="35%">和是是护</td>  
                      <td   width="21%">　</td>  
                      <td   width="23%">和</td>  
                  </tr>  
              </table>  
   
  </td>  
          <td   width="34%"   valign="top"   height="52"   οnmοuseοver="MouseOverFun2(this);"   >  
      <table   border="1"   width="100%"   bgcolor="#FF9966"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="21%">还是</td>  
                      <td   width="35%">护身符哈</td>  
                      <td   width="21%">　</td>  
                      <td   width="23%">呵呵</td>  
                  </tr>  
                  <tr>  
                      <td   width="21%">，</td>  
                      <td   width="35%">和是是护</td>  
                      <td   width="21%">　</td>  
                      <td   width="23%">和</td>  
                  </tr>  
              </table>          
              <table   width="100%"   border="1"   bgcolor="#FFFFCC"   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >  
                  <tr>  
                      <td   width="87">&nbsp;输多发</td>  
                      <td   width="115">嘎撒递归</td>  
                  </tr>  
                  <tr>  
                      <td   width="87">嘎大嘎</td>  
                      <td   width="115">大幅度</td>  
                  </tr>  
                  <tr>  
                      <td   width="87">过大撒</td>  
                      <td   width="115">嘎</td>  
                  </tr>  
              </table></td>  
      </tr>  
  </table>  
  </body>  
  </html> 
给力地板油
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table表格拖动列
06-01
可以随意改变列的位置，任意拖动列
js 特效 html 特效 随意移动的表格
09-03
js 特效 html 特效 随意移动的表格 js 特效 html 特效 随意移动的表格
table定位
weixin_30587025的博客
12-01 752
Table定位 在 web 页面中经常会遇到 table 表格，特别是后台操作页面比较常见。本篇详细讲解 table 表格如何定位。 1.1 table特性 1.table 页面查看源码一般有这几个明显的标签：table、tr、th、td2.<table>标示一个表格3.<tr>标示这个表格中间的一个行4.</th> 定义表头单元格5.</td&gt...
php的table位置,css caption-side表格标题位置的详解
weixin_33655208的博客
03-29 226
表格加入边框之后，默认样式情况如下图：如果我们想要调整表格标题，那该怎么办呢？在CSS中，我们使用caption-side属性来定义表格标题的位置。语法：caption-side:属性值;说明：caption-side属性取值如下：举例：caption-side属性table,th,td{border:1px solid gray;}caption{caption-side:bottom}表格标题...
【原创】JavaScript改变TABLE行的位置
SATAN1122的专栏
07-07 685
1223function ceshi(objsel,HeadRowNum,TxtCellNum,SelectCellNum){       if(HeadRowNum==null)    {        HeadRowNum = 1;    }     if(TxtCellNum==null)    {        TxtCellNum
HTML如何改变表格浮动位置,CSS3_3.文本格式化&表格&浮动
weixin_33983238的博客
06-05 1389
1 文本格式化1.1 文本格式化概述控制字体：字体大小、字体加粗、字体系列等；设置文本格式：文本颜色、文本排列和文本缩进等；使用文本格式化相关样式，取代加粗< b >、倾斜< i >等HTML元素1.2 字体属性1.2.1 控制字体指定字体，font-family: value1, value2;字体大小，font-size: value;单位px,pt,em/rem字体加...
键盘上下键移动选择table表格行的js代码
01-19
//这是要操作的表格： 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
javascript清理table样式
10-23
在本文中，我们将探讨如何使用JavaScript来清理HTML中的表格（table）的样式。这种情况通常发生在从Word文档复制内容到网页上时，复制的文本可能包含了大量不必要或者不兼容的样式，特别是当内容在移动设备上显示时...
table表格内容上下移动的三种实现方法
05-07
在网页设计中，HTML表格（Table）是一种常用的数据展示方式，有时我们需要实现表格内容的上下移动功能，以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一：...
JavaScript表格常用操作方法汇总
10-24
创建表格通常通过`<table>`标签来实现，但在JavaScript中，我们可以通过DOM操作动态创建。例如，我们可以创建一个名为`CTable`的构造函数，接受表格ID和行数作为参数。`CTable`构造函数会查找指定ID的表格元素，并...
javascript Table 中2个列（TD）的交换实现代码
10-30
非常不错的用js控制talbe中td的位置的实现代码。
bootstrap table表格行记录移动
03-16
至此，我们就实现了从一个Bootstrap Table向另一个表格移动行记录的功能。用户可以通过选择源表中的行，点击“Add to Target”按钮将行添加到目标表，或者选择目标表中的行，点击“Remove from Target”按钮移除。 ...
html+表格行上下移动位置,jQuery实现表格行上移下移和置顶
weixin_36214932的博客
06-03 1092
HTML页面上是一个简单的数据表格，我们在数据行中分别放置“上移”，“下移”和“置顶”三个链接，并且分别定义三个class属性，我们来通过jQuery实现这些操作。HTML5获取地理位置定位信息2015-04-25上移 下移 置顶CSS+Cookie实现的固定页脚广告条置顶...jQuery我们需要预先把jQuery库文件载入，然后分别绑定上移、下移和置顶三个操作的click事件。以“上移”为例，...
html改变表格位置,可随意拖动table表格列来改变列的位置
weixin_39641697的博客
06-04 1484
一款可随意拖动table表格列来改变列的位置，可以拖动表格内的任意列进行自由排序(暂未设置排序记忆功能，可自行添加)，个人觉得是比较实用的一个功能，喜欢的童鞋请收下吧。查看演示下载资源：18次 下载资源下载积分：20积分页面的head部分，需设置好页面元素的样式，代码如下： .no-select-text {user-select: no...
怎么是html table在特定位置开始,html css 控制div或者table等固定在指定位置的实现方法...
weixin_30233335的博客
06-04 936
CSS Code复制内容到剪贴板.bottomTable{background-color:rgb(249,249,249);z-index:99999999;position:fixed;bottombottom:0;left:0;width:100%;_position:absolute;/*forIE6*//*_top:expression(document.body.scrol...
调整html css表格位置,调整表格中的列宽（CSS / HTML）
weixin_32697149的博客
06-04 879
我一直在尝试将移动设备上的列宽变为50％，但我尝试过的所有内容都无效。这是css。@media (max-width: 768px) {#customTable tbody { float: left; }#customTable thead { float: left; }#customTable thead { min-width: 120px }#customTable td { displ...
[html5]表格拖动
haliofwu的专栏
12-18 3482
表格拖动前： 表格拖动后： 实现代码：function dragFromLeft(){ /**从左表拖动一条记录到右表*/ $(".group-wish-list-table, .js-table-container").droppable({ drop: function(event, ui) if (drapingId !== undefined
原生 js 实现 table 标签拖拽表头
cloki的博客
11-14 611
原生 js 实现 table 标签拖拽表头
Bootstrap入门知识，全局样式及组件
weixin_53334996的博客
12-07 281
Bootstrap入门知识，全局样式及组件Bootstrap全局样式Bootstrap组件 Bootstrap全局样式 一·排版 HTML 中的所有标题标签，h1 到 h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline） <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5&gt
js 表格行位置移动
最新发布
08-19
在 JavaScript 中，可以使用 DOM 操作来移动表格的行位置。 首先，我们可以通过使用 `document.getElementById()` 方法获取到要移动的表格，并存储在一个变量中。例如，如果我们的表格具有 `id` 属性为 `myTable`，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值