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

<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. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  2. C#数组,List,Dictionary的相互转换

    本篇文章会向大家实例讲述以下内容: 将数组转换为List 将List转换为数组 将数组转换为Dictionary 将Dictionary 转换为数组 将List转换为Dictionary 将Dicti ...

  3. 用C语言封装OC对象（耐心阅读，非常重要）

    用C语言封装OC对象(耐心阅读,非常重要) 本文的主要内容来自这里 前言 做iOS开发的朋友,对OC肯定非常了解,那么大家有没有想过OC中NSInteger,NSObject,NSString这些对象 ...

  4. .Net语言 APP开发平台——Smobiler学习日志：手机应用的TextTabBar快速实现方式

    参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-put.html http://www.yuanjiaocheng.net/we ...

  5. ASP.NET Aries 2.0 发布（原来的源码SVN已关闭，开源源码已迁移到GitHub）

    主要更新: 1:增加子目录部署支持. 2:增加Taurus.MVC支持. 3:优化及Bug修复. 1:增加子目录部署支持: 其实在重写Aries框架的时候,我是去掉了目录部署功能的,主要是为了加快Ar ...

  6. [Xamarin] 透過Native Code呼叫 JavaScript function （转帖）

    今天我們來聊聊關於如何使用WebView 中的Javascript 來呼叫 Native Code 的部分 首先,你得先來看看這篇[Xamarin] 使用Webview 來做APP因為這篇文章至少講解 ...

  7. .NET Core性能测试组件BenchmarkDotNet 支持.NET Framework Mono

    .NET Core 超强性能测试组件BenchmarkDotNet 支持Full .NET Framework, .NET Core (RTM), Mono. BenchmarkDotNet支持 C# ...

  8. 【道德经】漫谈实体、对象、DTO及AutoMapper的使用

    写在前面 实体和值对象 实体和对象 故常无欲以观其妙,常有欲以观其徼 初始实体和演化实体 代码中的DTO AutoMapper实体转换 后记 实体(Entity).对象(Object).DTO(Dat ...

  9. ENode 2.8 最新架构图简介

    ENode架构图 什么是ENode ENode是一个.NET平台下,纯C#开发的,基于DDD,CQRS,ES,EDA,In-Memory架构风格的,可以帮助开发者开发高并发.高吞吐.可伸缩.可扩展的应 ...

  10. Windows Server 2008 小操作汇总

    用惯了Windows2003,去配置2008的时候还真有点摸不着头脑.干脆把有用到的都列在这里,方便后续查找. 一.安装IIS.Telnet      点击:开始 -> 管理工具 -> 服 ...