学无先后,达者为师

网站首页 前端文档 正文

js实现按钮进行某行上移下移_javascript技巧

作者:夏微凉秋微暖   更新时间: 2022-04-25 前端文档

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

先上个通用简单的代码:






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







 
     
  • 001 上移下移置顶置底
  •  
  • 002 上移下移置顶置底
  •  
  • 003 上移下移置顶置底
  •  
  • 004 上移下移置顶置底

样式如下:

以下是实际运用,包括移动后获取数据,每一行的顺序等等:

//获取数据后插入页面
function getLine(){
    var childAreaListSize = ${childAreaListSize };
    var childAreaList = ${childAreaList };
    for(var i=0;i";
        
        tar += " *";
        tar += " 工程代码:";
        tar += " ";
        
        
        tar += " *";
        tar += " 工程名称:";
        tar += " ";
        
        tar += "  置顶";
        tar += "  上移";
        tar += "  下移";
        tar += "  置底";
        tar += "";
        
        
        $("#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

原文链接:https://blog.csdn.net/pengbin790000/article/details/76276357

栏目分类
最近更新