本文实例为大家分享了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="https://www.atool.online/article/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();
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
