首页 > 代码库 > Jquery实现上下移动和排序代码

Jquery实现上下移动和排序代码

2024-09-02 19:20:56   215人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src=http://www.mamicode.com/"jquery-2.0.0.js"></script>
<!--
<script type="text/javascript" src=http://www.mamicode.com/"resource_demo.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"jquery.alerts.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"ztree/js/jquery.ztree.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"ztree/css/zTreeStyle/zTreeStyle.css"></script>
<script type="text/javascript"src=http://www.mamicode.com/"jBox/jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript"src=http://www.mamicode.com/"jBox/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript"src=http://www.mamicode.com/"jBox/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript"src=http://www.mamicode.com/"jquery.cookie.js"></script>
<link href=http://www.mamicode.com/"jBox/jBox/Skins/Blue/jbox.css" rel="stylesheet" type="text/css" /> -->
<body>
<div id="checkAndInverCheck">
<table style="align:center">
<tr>
<td><input type="checkbox" value=http://www.mamicode.com/"蕙兰">蕙兰</td>
<td><input type="text" name="orderNum" size="3" value=http://www.mamicode.com/"1"/></td>
<td><input type="button" name="upMove" value=http://www.mamicode.com/"上移"/></td>
<td><input type="button" name="downMove" value=http://www.mamicode.com/"下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value=http://www.mamicode.com/"建兰">建兰</td>
<td><input type="text" name="orderNum" size="3" value=http://www.mamicode.com/"2"/></td>
<td><input type="button" name="upMove" value=http://www.mamicode.com/"上移"/></td>
<td><input type="button" name="downMove" value=http://www.mamicode.com/"下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value=http://www.mamicode.com/"寒兰">寒兰</td>
<td><input type="text" name="orderNum" size="3" value=http://www.mamicode.com/"3"/></td>
<td><input type="button" name="upMove" value=http://www.mamicode.com/"上移"/></td>
<td><input type="button" name="downMove" value=http://www.mamicode.com/"下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value=http://www.mamicode.com/"墨兰">墨兰</td>
<td><input type="text" name="orderNum" size="3" value=http://www.mamicode.com/"4"/></td>
<td><input type="button" name="upMove" value=http://www.mamicode.com/"上移"/></td>
<td><input type="button" name="downMove" value=http://www.mamicode.com/"下移"/></td>
</tr>
</div>
<script type="text/javascript">
//上移
$("input[name=‘upMove‘]").bind("click",function(){
  var $this = $(this);
  var curTr = $this.parents("tr");
  var prevTr = $this.parents("tr").prev();
  if(prevTr.length == 0){
    alert("第一行,想移啥？");
    return;
  }else{
    prevTr.before(curTr);
    sortNumber();//重新排序
  }
});
//下移
$("input[name=‘downMove‘]").bind("click",function(){
  
  var $this = $(this);
  var curTr = $this.parents("tr");
  var nextTr = $this.parents("tr").next();
  if(nextTr.length == 0){
    alert("最后一行,想移啥？");
    return;
  }else{
    nextTr.after(curTr);
    sortNumber();//重新排序
  }
});
//排序
$("input[name=‘orderNum‘]").bind("change",function(){
  var $this = $(this);
  //获得当前行
  var curTr = $this.parents("tr");
  var curOrderNum = $this.val();
  //当前行同级的所有行
  var siblingsTrs = curTr.siblings();
  if(siblingsTrs.length >0){
    for(var i in siblingsTrs){
      var otherOrderNum = $(siblingsTrs[i]).children().find("input[name=‘orderNum‘]").val();
      if(parseInt(curOrderNum) <= parseInt(otherOrderNum)){
        $(siblingsTrs[i]).before(curTr);
        sortNumber();//重新排序
        break;
      }
    }
  } 
});
function sortNumber(){
  var allInput = $("#checkAndInverCheck").find("input[name=‘orderNum‘]");
  alert(123);
  if(allInput.length != 0){
    for(var i=0;i<allInput.length;i++){
      var tempInput = allInput[i];
      tempInput.value = http://www.mamicode.com/i + 1;
    }
  }
}
</script>
</body>
</html>

Jquery实现上下移动和排序代码


联系
我们