JS实现一个列表中包含上移下移删除等功能

最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块

先看一下页面的截图

看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML

<ul class="clearfix">
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">1</em>:</span><em title="2013年 加班.txt" class="titDefaultName">2013年 加班.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">2</em>:</span><em title="使用说明.txt" class="titDefaultName">使用说明.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">

<a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">3</em>:</span><em title="占占大师.txt" class="titDefaultName">占占大师.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">4</em>:</span><em title="排序问题.txt" class="titDefaultName">排序问题.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">

<a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
</ul>

下面我们主要看一下JS代码,主要使用JQ的on方法实现的,原因是因为列表的数据有第一次为静态的(bind),当排序后,数据变为动态的(live),所以,这种结构只能使用on才最合理,看一下代码

<script type="text/ecmascript">
$(function () {
//上移
$(".clearfix").on("click", ".moveUpBtn", function () {
var self = $(this);
var _old = self.closest("li.courseList");
var _new = self.closest("li.courseList").prev("li");
if (_new.length > 0) {
var _temp = _old.html();
_old.empty().append(_new.html());
_new.empty().append(_temp);
}

});

//下移
$(".clearfix").on("click", ".moveDownBtn", function () {
var self = $(this);
var _old = self.closest("li.courseList");
var _new = self.closest("li.courseList").next("li");
if (_new.length > 0) {
var _temp = _old.html();
_old.empty().append(_new.html());
_new.empty().append(_temp);
}
});

//删除
$(".clearfix").on("click", ".deleteBtn", function () {
var self = $(this);//当前click事件源对象
self.closest("li.courseList").remove();
});

});
</script>

运行之后,效果就出来了,本JS中没有把与后台交互的AJAX方法写出来,大家可以根据具体情况而定。

(0)

相关推荐

  • JS实现一个列表中包含上移下移删除等功能

    最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&

  • Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

  • JQuery实现table中tr上移下移的示例(超简单)

    表格样式 <table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td

  • js判断一个字符串是否包含一个子串的方法

    本文实例讲述了js判断一个字符串是否包含一个子串的方法.分享给大家供大家参考.具体如下: 在我们前端日常开发中,经常会遇到判断一个字符串中是否包含某个子串,这里我们将去探究一些解决此种需求的方法以及正确的使用它们.理想情况下,我们要找的是一个能匹配我们的目的(if x contains y)的方法,并返回true或false. 一.String.prototype.indexOf和String.prototype.lastIndexOf 这两个方法,可能是我们最容易想到的,如果包含子串,则返回大

  • python 求一个列表中所有元素的乘积实例

    如下所示: # 求一个列表中所有元素的乘积 from functools import reduce lt = [1,2,3,4,5] ln = reduce(lambda x,y:x * y,lt) print(ln) 以上这篇python 求一个列表中所有元素的乘积实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • python 实现返回一个列表中出现次数最多的元素方法

    如下所示: # 返回一个列表中出现次数最多的元素 def showmax(lt):     index1 = 0                       #记录出现次数最多的元素下标     max = 0                          #记录最大的元素出现次数     for i in range(len(lt)):         flag = 0                    #记录每一个元素出现的次数         for j in range(i+1,

  • python找出一个列表中相同元素的多个索引实例

    定义:X=[1,2,3,1,4] 任务:找出元素为1的索引 Solution: # 如果直接用X.index(1),只能得到0这一个索引,而我们需要所有索引. l = len(X) zip_list = zip(*(range(l),X)) id1 = [z[0] for i,z in enumerate(zip_list) if z[1]==1] # 或者更简单的 id1 = [i for i,x in enumerate(X) if x==1] 以上这篇python找出一个列表中相同元素的多

  • python 返回一个列表中第二大的数方法

    如下所示: # 返回一个列表中第二大的数 def second(ln): max = 0 s = {} for i in range(len(ln)): flag = 0 for j in range(len(ln)): if ln[i] >= ln[j] and i != j: flag = flag + 1 s[i] = flag if flag > max: max = flag print(s) for i in s: if s[i] == max - 1: break print(l

  • python中计算一个列表中连续相同的元素个数方法

    最简单的例子: a = [1,1,1,1,2,2,2,3,3,1,1,1,3] # 问:计算a中最多有几个连续的1 很明显,答案是4 如果用代码实现,最先想到的就是itertools: import itertools a = [1,1,1,1,2,2,2,3,3,1,1,1,3] print max([len(list(v)) for k,v in itertools.groupby(a)]) 但是如果不想用itertools呢? 可以尝试以下的办法,效率还比itertools高一个数量级!

  • JS获取一个字符串中指定字符串第n次出现的位置

    了解类似的获取字符位置的方法: charAt() 获取字符串指定位置的字符 用法:strObj是字符串对象,index是指定的位置,(位置从0开始数) strObj.charAt(index) indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 用法:stringObject是字符串对象,searchvalue是指定的字符串值,fromindex(可有可无)指定开始匹配字符串值的位置,若无,表示从0位置开始. stringObject.indexOf(searchvalue

随机推荐