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

2020-05-27 17:52:45易采站长站整理

//上移
$("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 = i + 1;
}
}
}
</script>
</body>
</html>

效果如下: