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

<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. ASP.NET Core 中的那些认证中间件及一些重要知识点

    前言 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系列(一,二,三)奠定一下基础. 有关于 Authentication 的知识太广,所以本篇介绍几个在 A ...

  2. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  3. CENTOS 6.5 平台离线编译安装 PHP5.6.6

    一.下载php源码包 http://cn2.php.net/get/php-5.6.6.tar.gz/from/this/mirror 二.编译 编译之前可能会缺少一些必要的依赖包,加载一个本地yum ...

  4. 23种设计模式--单例模式-Singleton

    一.单例模式的介绍 单例模式简单说就是掌握系统的至高点,在程序中只实例化一次,这样就是单例模式,在系统比如说你是该系统的登录的第多少人,还有数据库的连接池等地方会使用,单例模式是最简单,最常用的模式之 ...

  5. Consul 服务注册与服务发现

    上一篇:Mac OS.Ubuntu 安装及使用 Consul 1. 服务注册 对 Consul 进行服务注册之前,需要先部署一个服务站点,我们可以使用 ASP.NET Core 创建 Web 应用程序 ...

  6. ajax请求和aspx返回数据

    ajax请求: $(function () {            $.ajax({                url: "index.aspx?method=send",  ...

  7. 《CPU的工作过程》

    本文转载自inter官方网址:https://software.intel.com/zh-cn/articles/book-Processor-Architecture_CPU_work_proces ...

  8. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  9. Xamarin.Android-用ZXing实现二维码扫描以及连续扫描

    一.前言 本文的内容有两个基础:ZXing.Net和ZXing.Net.Mobile ZXing.Net:ZXing的C#实现,主要封装了各种二维码的编码.解码等跨平台的算法 ZXing.Net.Mo ...

  10. AutoMapper(一)

    返回总目录 映射前后操作 偶尔有时候,在映射发生之前或之后,你可能需要执行一些自定义的逻辑.这可能是很少见的事情,因为在AutoMapper之外处理这些事情是更明显的.你可以创建一个映射前后的全局操作 ...