js实现按钮进行某行上移下移
本文实例为大家分享了js实现按钮进行某行上移下移的具体代码，供大家参考，具体内容如下
先上个通用简单的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>使用js实现上移、下移、置顶、置底功能及源码案例</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="jquery-1.7.1.min.js"></script>
<style>
.demo li{line-height: 30px;border-bottom: 1px solid #000;}
.demo li a{padding: 0 20px;}
</style>
</head>
<body>
<ul id="addChildDiv">
<li>001 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置顶</a><a href="#" class="bottom1">置底</a></li>
<li>002 <a href="#" class="up1">上移</a><a href="#" class="down">下移</a><a href="#" class="top1">置顶</a><a href="#" class="bottom1">置底</a></li>
<li>003 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置顶</a><a href="#" class="bottom1">置底</a></li>
<li>004 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置顶</a><a href="#" class="bottom1">置底</a></li>
</ul>
<script>
$("#addChildDiv").on('click', 'a', function(event) {
event.preventDefault;
var parent=$(this).parent();
var parents=$(this).parents("#addChildDiv");
var len=parents.children().length;
if(($(this).is(".up1") || $(this).is(".top1")) && parent.index()==0){
return false;
}else if(($(this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){
return false;
}
switch (true) {
case $(this).is(".up1"):
var prev = parent.prev();
parent.insertBefore(prev);
break;
case $(this).is(".down1"):
var next = parent.next();
parent.insertAfter(next);
break;
case $(this).is(".top1"):
parents.prepend(parent);
break;
case $(this).is(".bottom1"):
parents.append(parent);
break;
}
});
</script>
</body>
</html>
样式如下：
以下是实际运用，包括移动后获取数据，每一行的顺序等等：
//获取数据后插入页面
function getLine(){
var childAreaListSize = ${childAreaListSize };
var childAreaList = ${childAreaList };
for(var i=0;i<childAreaListSize;i++){
++a;
var tar = "<li>";
tar += " <input type=\"hidden\" id=\"awId_" +a+ "\" name=\"awId_" +a+"\" value=\""+ childAreaList[i].id + "\" />";
tar += " <span style=\"color: red;\">*</span>";
tar += " <span \">工程代码：</span>";
tar += " <input style=\"width:250px\" type=\"text\" id=\"awCode_" +a+ "\" name=\"awCode_" +a+"\" value=\""+ childAreaList[i].awCode + "\" maxlength=\"50\" readonly/>";
tar += " <span style=\"color: red;\">*</span>";
tar += " <span \">工程名称：</span>";
tar += " <input style=\"width:250px\" type=\"text\" id=\"awName_" +a+ "\" name=\"awName_" +a+"\" value=\""+ childAreaList[i].awName + "\" maxlength=\"50\" readonly/>";
tar += " <a href=\"###\" class=\"top1\" \">置顶</a>";
tar += " <a href=\"###\" class=\"up1\" \">上移</a>";
tar += " <a href=\"###\" class=\"down1\" \">下移</a>";
tar += " <a href=\"###\" class=\"bottom1\" \">置底</a>";
tar += "</li>";
$("#addChildDiv").append(tar);
}
}
//排序
$("#addChildDiv").on('click', 'a', function(event) {
event.preventDefault;
var parent=$(this).parent();
var parents=$(this).parents("#addChildDiv");
var len=parents.children().length;
if(($(this).is(".up1") || $(this).is(".top1")) && parent.index()==0){
return false;
}else if(($(this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){
return false;
}
switch (true) {
case $(this).is(".up1"):
var prev = parent.prev();
parent.insertBefore(prev);
break;
case $(this).is(".down1"):
var next = parent.next();
parent.insertAfter(next);
break;
case $(this).is(".top1"):
parents.prepend(parent);
break;
case $(this).is(".bottom1"):
parents.append(parent);
break;
}
});
//保存数据
var putFlag = false; //避免重复提交
function saveData(){
if(putFlag == true){
$.dialog.tips('禁止重复提交！',3,'alert.gif',function(){});
return false;
}
$("#num").val(a);//设置提交的数量
var d=$.dialog.tips('正在执行，请稍候...',600,'loading.gif');
//var list=$("#addChildDiv li input[type='hidden']"); 获取id：addChildDiv下的li标签的input标签的hidden类型
var list = ",";
for (var i=0;i<a;i++){
// 获取id：addChildDiv下的第i的li标签的input标签的hidden类型
var zzz = $("#addChildDiv").find("li:eq("+i+")").find("input[type='hidden']").val();
list = list + zzz +","
}
//保存
putFlag = true;
$.ajax({
type:'post',
data:{"ids":list},
url:'${root}/base/BaseAreaWorkSpace/orderChild.jspx?myId='+$("#myId").val(),
async:false,
dataType:"json",
success:function(data){
putFlag = false;
$.dialog.tips(data.message,3,'alert.gif',function(){});
closePop();
//600ms后再加载数据
setTimeout(function () {
dataLoad();
}, 600);
//d.close();
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现一个列表中包含上移下移删除等功能
最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&
-
js实现Select列表各项上移和下移的方法
本文实例讲述了js实现Select列表各项上移和下移的方法.分享给大家供大家参考.具体如下: 这里介绍Select列表各项上移和下移的Js代码,可以手功排序,以前我们都见到过的,从事WEB编程的朋友经常会用得到. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-move-up-down-codes/ 具体代码如下: <html> <head> <title>Select列表各项上移和下移</t
-
JS实现的表格操作类详解(添加，删除，排序，上移，下移)
本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin
-
js实现数组内数据的上移和下移的实例
实例如下所示: var swapItems = function(arr, index1, index2){ arr[index1] = arr.splice(index2,1,arr[index1])[0] return arr } var arr = [1,2,3] var newArr = [] upData (arr, index) { if (this.arr.length > 1 && index !== 0) { newArr = swapItems(arr, inde
-
Vue.js实现一个todo-list的上移下移删除功能
如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换
-
基于js实现数组相邻元素上移下移
实现效果: 即需要实现当前元素与相邻元素交换位置, 当上移时,则是当前元素与上一元素调换位置:当下移时,则是当前元素与下一元素调换位置. 实现代码: js: //点击上移 clickUp(index){ this.swapArray(this.tableData, index-1, index); }, //点击下移 clickDown(index){ this.swapArray(this.tableData, index, index+1); }, //数组元素互换位置 swapArray(
-
AngularJS实现数据列表的增加、删除和上移下移等功能实例
效果图 实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0; list-style:
-
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
本文实例讲述了JS与jQuery实现ListBox上移,下移,左移,右移操作功能.分享给大家供大家参考,具体如下: 先来看看Javascript版选择下拉菜单互移且排序操作: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&
-
js操作table中tr的顺序实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了目标行再直接加进去,最后把整体的html赋值给div完成效果 js代码如下 //使行向上一行 function setRowUp(obj) { if (obj.parentNode.parentNode.rowIndex != 1) { var tab = obj.parentNode.parent
-
JS实现点击上移下移LI行数据的方法
本文实例讲述了JS实现点击上移下移LI行数据的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript排序功能,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择.myList为ul的id值,m为0显示文字,m为1显示图片,mO.mT为文字或图片内容. 演示效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional