jquery实现表格内容的上下移动

最新推荐文章于 2022-07-29 14:57:24 发布

糖糖糖糖糖甜

最新推荐文章于 2022-07-29 14:57:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.csdn.net/zzqw199012/article/details/25876257

jquery 专栏收录该内容

2 篇文章

订阅专栏

最近做的项目中用到单元格的内容的上下移动，看了一个简单的demo，自己稍作了下改动，具体如下。

html部分：

js实现部分：

/*** start 上移和下移*****/
var object; //当前对象
var preobj; //记录上一个对象
var count=0;
function tt(obj){
count++;

//判断当前的对象与上一个记录的是否为同一个目的：改变选择的对象时候要改变高亮的对象
if(count == 1){
object = obj;
preobj = obj;
}
else{
preobj = object;
object = obj;
}
next=$(obj).next();
pre = $(obj).prev();
$(obj).css({ "color": "#ff0011"});
if(object != preobj){
$(preobj).css({ "color": "#000"});
}

};

//下移按钮
$(document).ready(function(){
$(".down").bind("click",function(){
if(object){
var next = $(object).next();
if(next){
var sort0 = $(next).children("td:eq(0)").text(); //记录要交换的位置的序号
var sort1 = $(object).children("td:eq(0)").text();//记录要交换的位置的序号
$(object).children("td:eq(0)").empty().text(sort0);
$(next).children("td:eq(0)").empty().text(sort1);
$(next).insertBefore($(object));

}
}
});

});

//上移按钮
$(document).ready(function(){
$(".upmv").bind("click",function(){
if(object){
var pre = $(object).prev();
var sort0 = $(pre).children("td:eq(0)").text();//记录要交换的位置的序号
var sort1 = $(object).children("td:eq(0)").text();//记录要交换的位置的序号
$(object).children("td:eq(0)").empty().text(sort0);
$(pre).children("td:eq(0)").empty().text(sort1);
if(pre){$(pre).insertAfter($(object));}
}
});

});
/*** end 上移和下移*****/集体的参照效果见链接http://download.csdn.net/detail/zzqw199012/7349715