如何用JS实现上线移动、置顶、置底按钮？-群英

上一篇：用JS实现简单的水印添加器思路和方法是什么下一篇：JS有多少方法可以判断数组，什么方法好？

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