闲来没事写了个小demo，原本是回答别人博问的，有人比我更快的给出了链接，想想半途而废也不好，就写完了，写个博文记录一下（效果是按照我自己来的，可能和最早别人问的不太一样，反正无关紧要啦）

直接上code：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>

        table tr td {

            border: 1px solid black;

            width: 200px;

            height: 400px;

        }

        li {

            list-style: none;

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <td>

                <ul>

                    <li><input type="checkbox" value="江西" />江西</li>

                    <li><input type="checkbox" value="四川" />四川</li>

                    <li><input type="checkbox" value="福建" />福建</li>

                    <li><input type="checkbox" value="湖南" />湖南</li>

                </ul>

            </td>

            <td>

                <ul>

                    <li><input id="right" type="button" value=">"></li>

                    <li><input id="rightAll" type="button" value=">>"></li>

                    <li><input id="left" type="button" value="<"></li>

                    <li><input id="leftAll" type="button" value="<<"></li>

                </ul>

            </td>

            <td>

                <ul>

                </ul>

            </td>

        </tr>

    </table>

</body>

</html>

<script>

    $(function () {

        $("#right").click(function () {

            $("td").eq(0).find("input:checked").each(function (i, e) {

                $("td").eq(2).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>");

                $("td").eq(0).find("input:checked").parent().remove();

            });

        });

        $("#rightAll").click(function () {

            $("td").eq(0).find("input").each(function (i, e) {

                $("td").eq(2).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>");

                $("td").eq(0).find("input").parent().remove();

            });

        });

        $("#left").click(function () {

            $("td").eq(2).find("input:checked").each(function (i, e) {

                $("td").eq(0).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>");

                $("td").eq(2).find("input:checked").parent().remove();

            });

        });

        $("#leftAll").click(function () {

            $("td").eq(2).find("input").each(function (i, e) {

                $("td").eq(0).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>");

                $("td").eq(2).find("input").parent().remove();

            });

        });

    });

</script>

效果图：

　　Remarks：> 是移动选中的，>>是移动全部。（第一个与第三个之间的反复移动）。代码比较粗，没多想。毕竟具体需求具体对待，简单的写一遍就好了，实际运用中自己去发挥。

DOM节点左右移动的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  3. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  6. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  7. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  8. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  9. 第6章 DOM节点操作

    一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  10. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...

随机推荐

  1. Unity Editor 下创建Lua和Text文件

    预览 在Project视图中,扩展右键菜单,右键 – Create - Text File 创建一个Text文件,或者Lua文件. 关键点 获取当前选择的路径,以Assets路径开头 var sele ...

  2. php配置文件php.ini的详细解析(续)

    file_uploads = On                                                                                 // ...

  3. Docker 入门到实践（四）Docker 使用镜像

    一.获取镜像 Docker Hub 上有大量的高质量的镜像让我们获取,命令为: docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] 具体的选项可以 ...

  4. Windows 版本说明，Enterprise、Ultimate、Home、Professional知多少

    关于Windows 的安装光盘版本很多种,很多人不知道选择哪些. Ultimate 旗舰版,VISTA开始有了这个级别,是最全最高级的,一般程序开发的电脑,玩游戏的电脑,建议用它,不过对配置稍有一些要 ...

  5. ES5-ES6-ES7_async函数

    async 函数概述 async/await应该是目前最简单的异步方案,ES7 中新增了 async/await 两个关键词. async 可以声明一个异步函数,此函数需要返回一个 Promise 对 ...

  6. 选择数据库管理系统（DBMS）时主要考虑的因素

    选择数据库管理系统时应从以下几个方面予以考虑: (1) 构造数据库的难易程度. 需要分析数据库管理系统有没有范式的要求,即是否必须按照系统所规定的数据模型分析现实世界,建立相应的模型:数据库管理语句是 ...

  7. Integer判断大于 == 127时的坑

    在一次判断返回Interger类型的code,  用==结果, 没进去 Integer的值在-128到127时,Integer对象是在IntegerCache.cache产生,会复用已有对象,也就是说 ...

  8. centos7下kubernetes（5。部署kubernetes dashboard）

    基于WEB的dashboard,用户可以用kubernetes dashboard部署容器话的应用,监控应用的状态,执行故障排查任务以及管理kubernetes各种资源. 在kubernetes da ...

  9. 如何利用pip自动生成和安装requirements.txt依赖

    在查看别人的Python项目时,经常会看到一个requirements.txt文件,里面记录了当前程序的所有依赖包及其精确版本号.这个文件有点类似与Rails的Gemfile.其作用是用来在另一台PC ...

  10. P2678 跳石头（二分+模拟）

    思路: 我觉得我现在有一个非常不好的习惯,那就是不爱画图.当我把这个题的检验函数用图来表示出来.感觉就非常好理解了. 直接说检验函数吧.就是非常简单的模拟,我现在换成角度来说:假设你最小能跳x(不能跳 ...