js实现按钮进行某行上移下移
更新时间：2022年02月22日 10:29:45 作者：夏微凉秋微暖
这篇文章主要为大家详细介绍了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();
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下2015-05-05
Hash 可以看作是一个 关联数组，它对每一个值都绑定了一个唯一的键（值并不必须是唯一的）， 然而，它不能保证迭代时元素的顺序始终一致。因为 JavaScript 程序语言的特性，每个对象实际上都是一个 hash,下面我们就来详细探讨下。2015-05-05
关于Javascript，大家肯定都很熟悉啦，对于有编程经验的朋友来说，Javascript很快就能上手，不过关于JS的变量作用域，还是有一点差别的。2010-03-03
原生js XMLhttprequest请求onreadystatechange执行两次的解决
这篇文章主要介绍了原生js XMLhttprequest请求onreadystatechange执行两次的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
math.round()方法将对参数进行四舍五入操作，对js math.round相关知识感兴趣的朋友一起学习吧2015-12-12
三剑客：offset、client和scroll还傻傻分不清？
这篇文章主要给大家介绍了三剑客：offset，client和scroll的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要为大家详细介绍了微信小程序实现拍照和相册选取图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了微信小程序实现多行文字 超出部分省略号显示功能，比如设置只显示2行，超出部分省略号显示，本文通过实例代码给大家介绍,需要的朋友可以参考下2019-10-10
今天小编就为大家分享一篇layui动态绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这是一款仿照百度图片的瀑布流效果，可以无限加载,兼容各大主流浏览器，这里分享给大家，希望小伙伴们能够喜欢2016-04-04
最新评论