本次讲的是两个表格之间数据的移动，左边的表格移动到右边，并且左边表格移动内容消失。

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <style type="text/css">
  select {
  width: 100px;
  position: relative;
  float: left;
  }
   
  #div-out {
  width: 100px;
  position: relative;
  float: left;
  height: 113px;
  /*border: 1px solid black;*/
  }
   
  #div-in {
  width: 50px;
  /*border: 1px solid red;*/
  margin: 0px auto;
  }
   
  input {
  margin-top: 22px;
  width: 50px;
  }
  </style>
  </head>
   
  <body>
  <select id="s1" size="7" multiple="multiple">
  <option>AAA</option>
  <option>BBB</option>
  <option>CCC</option>
  <option>DDD</option>
  <option>EEE</option>
  </select>
  <div id="div-out">
  <div id="div-in">
  <input type="button" value=">>>" onclick="toright()" />
  <input type="button" value="<<<" onclick="toleft()" />
  </div>
  </div>
  <select id="s2" size="7" multiple="multiple"></select>
  </body>
   
  </html>
  <script type="text/javascript">
  var opt = document.getElementById("s1").options;
   
  function toright() {
  for(var i = 0; i < opt.length; i++) {
  if(opt[i].selected){
  // var opt_temp = document.createElement("option");
  // opt_temp.innerText = opt[i].text;
  // alert(opt[i].text);
  document.getElementById("s2").appendChild(opt[i]);
  // document.getElementById("s1").removeChild(opt[i]);
  i--;
  }
  }
  }
  </script>

这是往右移动，往左边移动同理。

DOM的小练习，两个表格之间数据的移动的更多相关文章

  1. intent，实现两个活动之间数据的传递

    一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...

  2. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  3. CSS小技巧-两个盒子之间的间距问题

    1.水平排放的盒子,水平间距是两个margin的累加 2.垂直排放的盒子,垂直间距是合并的取最大值

  4. MFC中两个对话框之间数据传递

    以下是在网上参考的一篇文章,网址:https://blog.csdn.net/foreverhuylee/article/details/21707197 这里有两种情况, 第一种情况是: (在一个基 ...

  5. 【笔记】.NET开发环境下使用PostgreSQL+Oracle_fdw 实现两个数据库之间数据交互操作（二）

    一 新的可视化工具 因为前文所提到的,看不到外部服务器和外部表的问题,我更换了可视化工具. 好用的新工具PostgreSQL Maestro! 当然如此好用的工具不是免费的,如果想免费使用还请自己去找 ...

  6. 9月23日JavaScript作业----两个列表之间移动数据

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  7. MySql计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数

    MySql计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数 计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数,这里主要分享的是通过MySql内置的函数 TimeStampDiff() ...

  8. HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。

    一:列表之间数据移动 第一个列表里面有内容,第二个里面没有 实现功能: 点击左侧列表选中一项内容,点击按钮,复制到右侧 点击复制所有按钮,将左侧列表所有数据,复制到右侧 扩展功能:右侧列表实现去重复 ...

  9. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

随机推荐

  1. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#signalR 后台创建了一个DntHub的集线器 前台在调用的时候出现了问题(经检查是代理对象 ...

  2. 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...

  3. jQuery学习之路（4）- 动画

    ▓▓▓▓▓▓ 大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 ...

  4. 【开源】.Net 动态脚本引擎NScript

    开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务  238543768 .Net 动态脚本引擎 NScript   ...

  5. [C#] 简单的 Helper 封装 -- SecurityHelper 安全助手：封装加密算法（MD5、SHA、HMAC、DES、RSA）

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...

  6. AbpZero--2.如何启动

    1.直接启动 VS中直接启动 2.IIS站点 IIS中配置一个站点来启动(推荐) 3.登录 系统默认创建2个用户 默认用户名:admin 密码:123qwe 租户:Default  默认用户名:adm ...

  7. Android之SAX解析XML

    一．SAX解析方法介绍 SAX(Simple API for XML)是一个解析速度快并且占用内存少的XML解析器,非常适合用于Android等移动设备. SAX解析器是一种基于事件的解析器,事件驱动 ...

  8. 二叉树的创建和遍历(C版和java版)

    以这颗树为例:#表示空节点前序遍历(根->左->右)为:ABD##E##C#F## 中序遍历(左->根->右)为:#D#B#E#A#C#F# 后序遍历(左->右-> ...

  9. NYOJ 998

    这道题是欧拉函数的使用,这里简要介绍下欧拉函数. 欧拉函数定义为:对于正整数n,欧拉函数是指不超过n且与n互质的正整数的个数. 欧拉函数的性质:1.设n = p1a1p2a2p3a3p4a4...pk ...

  10. MzBlog分析

    早上衣明志 在QQ群里说他的博客开源了,地址在 https://github.com/qihangnet/MZBlog,基于NancyFX和MongoDB开发的.博客内容需要使用 MarkDown 进 ...