DOM的小练习，两个表格之间数据的移动
本次讲的是两个表格之间数据的移动，左边的表格移动到右边，并且左边表格移动内容消失。
| <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的小练习，两个表格之间数据的移动的更多相关文章
- intent，实现两个活动之间数据的传递
一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...
- JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- CSS小技巧-两个盒子之间的间距问题
1.水平排放的盒子,水平间距是两个margin的累加 2.垂直排放的盒子,垂直间距是合并的取最大值
- MFC中两个对话框之间数据传递
以下是在网上参考的一篇文章,网址:https://blog.csdn.net/foreverhuylee/article/details/21707197 这里有两种情况, 第一种情况是: (在一个基 ...
- 【笔记】.NET开发环境下使用PostgreSQL+Oracle_fdw 实现两个数据库之间数据交互操作（二）
一 新的可视化工具 因为前文所提到的,看不到外部服务器和外部表的问题,我更换了可视化工具. 好用的新工具PostgreSQL Maestro! 当然如此好用的工具不是免费的,如果想免费使用还请自己去找 ...
- 9月23日JavaScript作业----两个列表之间移动数据
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- MySql计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数
MySql计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数 计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数,这里主要分享的是通过MySql内置的函数 TimeStampDiff() ...
- HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。
一:列表之间数据移动 第一个列表里面有内容,第二个里面没有 实现功能: 点击左侧列表选中一项内容,点击按钮,复制到右侧 点击复制所有按钮,将左侧列表所有数据,复制到右侧 扩展功能:右侧列表实现去重复 ...
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
随机推荐
- 如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户
阅读目录 前言 怎么卖 领域服务的使用 回到现实 结语 一.前言 上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...
- Cassandra简介
在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...
- Java 8五大主要功能为开发者提供了哪些便利？
两年前当Java 8发布后,立即受到了业界的欢迎,因为它大大提高了Java的性能.它独特的卖点是,顾及了编程语言的每一个方面,包括JVM(Java虚拟机)和编译器,并且改良了其它帮助系统. Java是 ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- 关于面试题 Array.indexof() 方法的实现及思考
这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...
- 从零开始编写自己的C#框架（24）——测试
导航 1.前言 2.不堪回首的开发往事 3.测试推动开发的成长——将Bug消灭在自测中 4.关于软件测试 5.制定测试计划 6.编写测试用例 7.执行测试用例 8.发现并提交Bug 9.开发人员修复B ...
- 在Windows上编译和调试CoreCLR
生成CoreCLR - Windows篇 本文的唯一目的就是让你运行Hello World 运行环境 Window 7+ Visual studio 2015 确保C++ 工具已经被安装,默认是不安装 ...
- 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
- 走进缓存的世界（三） - Memcache
系列文章 走进缓存的世界(一) - 开篇 走进缓存的世界(二) - 缓存设计 走进缓存的世界(三) - Memcache 简介 Memcache是一个高性能的分布式内存对象缓存系统,用于动态Web应用 ...
- click事件的累加绑定，绑定一次点击事件，执行多次
最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求.完成后看效果,第一次点击没有问题.再一次点击后 ...