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

<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. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. SQL Server2014 SP2新增的数据库克隆功能

    SQL Server2014 SP2新增的数据库克隆功能 创建测试库 --创建测试数据库 create database testtest use testtest go --创建表 )) --插入数 ...

  3. “.Net 社区虚拟大会”(dotnetConf) 2016 Day 1 Keynote: Scott Hunter

    “.Net 社区虚拟大会”(dotnetConf) 2016 今天凌晨在Channel9 上召开,在Scott Hunter的30分钟的 Keynote上没有特别的亮点,所讲内容都是 微软“.Net社 ...

  4. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  5. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  6. css实现单行，多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  7. OVS local network 连通性分析 - 每天5分钟玩转 OpenStack（132）

    前面已经创建了两个 OVS local network,今天详细分析它们之间的连通性. launch 新的 instance "cirros-vm3",网络选择 second_lo ...

  8. CRL快速开发框架系列教程十(导出对象结构)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  9. LINQ to SQL Where条件

    1. 适用场景 实现条件的过滤和查询等功能. 2. 说明 跟SQL语句中的where作用相似,都起到了范围的限定即过滤的作用,而判断条件是紧跟后面的条件子句.where主要分为三种形式:简单形式.条件 ...

  10. Autofac 的点滴

    泛型类型的注册和使用 public interface IRepository<T> where T:class { } public interface ISchoolDetailRep ...