怎样用JS实现上线移动置顶置底按钮

发布时间：2023-09-15 12:36:07 所属栏目：语言来源：

导读：今天这篇给大家分享的知识是“如何用JS实现上线移动、置顶、置底按钮？”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“如何用JS实现上线移动、置顶、置

今天这篇给大家分享的知识是“如何用JS实现上线移动、置顶、置底按钮？”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“如何用JS实现上线移动、置顶、置底按钮？”文章能帮助大家解决问题。

本文实例为大家分享了js实现按钮进行某行上移下移的具体代码，供大家参考，具体内容如下

先上个通用简单的代码：

<!DOCTYPE html>

<html>

<head>

<title>使用js实现上移、下移、置顶、置底功能及源码案例</title>

<style>

.demo li{line-height: 30px;border-bottom: 1px solid #000;}

.demo li a{padding: 0 20px;}

</style>

</head>

<body>

</ul>

$("#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实现上线移动置顶置底按钮