闲来没事写了个小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. Google开源GSON的使用

    * 谷歌开原项目GitHub地址:https://github.com/google/gson 1.新建一个maven项目,引入gson的dependency坐标依赖以及commons-io的坐标: ...

  2. 2016某知名互联网公司PHP面试题及答案(续)

    1 写出mysql中,插入数据,读出数据,更新数据的语句 INSERT INTO 表名 VALUES ("",""): SELECT * FROM 表名:. U ...

  3. PHP中cURL的应用

    这里是慕课网上讲cURL 的一张图,觉得吧这个过程说的很清楚,因此就不错了. 1, 打开一个网页,下载网页内容 <?php $curl = curl_init("http://www. ...

  4. LeetCode算法题-Invert Binary Tree

    这是悦乐书的第194次更新,第199篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第55题(顺位题号是226).反转二叉树.例如: 输入: 4 / \ 2 7 / \ / ...

  5. 谱聚类算法(Spectral Clustering)

        谱聚类(Spectral Clustering, SC)是一种基于图论的聚类方法--将带权无向图划分为两个或两个以上的最优子图,使子图内部尽量相似,而子图间距离尽量距离较远,以达到常见的聚类的 ...

  6. 让EntityFramework.Extended支持MySql

    EF:Entity Framework EFEL:Entity Framework Extended Library EFEL5.0时代是不支持MySql的,现在升级到6.0之后,已经支持MySql了 ...

  7. 获取当前页面的URL信息

    以前在做网站的时候,经常会遇到当前页的分类高亮显示,以便让用户了解当前处于哪个页面.之前一直是在每个不同页面写方法.工程量大,也不便于修改.一直在想有什么简便的方法实现.后来在网上查到可以用获取当前U ...

  8. C#、Java中的一些小知识点总结(持续更新......)

    前言:在项目中,有时候一些小的知识,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小知识点,以备用,并持续更新...... 1.禁用DataGridV ...

  9. UVA12627-Erratic Expansion(递归)

    Problem UVA12627-Erratic Expansion Accept: 465  Submit: 2487Time Limit: 3000 mSec Problem Descriptio ...

  10. flask_sqlalchemy中根据聚合分组后的结果进行排序,根据日期(datetime)按天分组

    from sqlalchemy import func, desc # 根据聚合查询总收入,按总收入逆序 s= db.session.query(TpOrders.room_type_id, (fun ...