php置顶,Jquery+bootstrap实现表格行置顶置底上移下移操作

最近接到产品的一个需求,它是要对城市排序,实际操作中我们要实现表格行置顶置底上移下移操作.

如下图:

使用这些按钮,我们可以对城市进行上下移动的操作,这些排好序的城市就会在APP上这个顺序展示了.

我是怎么用Jquery+bootstrap进行实现这些功能的呢?往下看就知道了,嘿嘿.

1.html

首先我们加载好jquery与bootstrap基本的css与js,这个你们自己加载就好了.下面是我的HTML5代码:

北京市
江西呀
河南拉

返回

这块HTML代码主要是布局好要操作的页面元素,上移”，“下移”,“置顶”,"置底"操作元素.

2.JS代码

$(function(){

//上移

var $up = $(".up");

$up.click(function() {

var $tr = $(this).parents("tr");

if ($tr.index() != 0) {

$tr.fadeOut().fadeIn();

$tr.prev().before($tr);

}

});

//下移

var $down = $(".down");

var len = $down.length;

$down.click(function() {

var $tr = $(this).parents("tr");

if ($tr.index() != len - 1) {

$tr.fadeOut().fadeIn();

$tr.next().after($tr);

}

});

//置顶

var $top = $(".top");

$top.click(function(){

var $tr = $(this).parents("tr");

$tr.fadeOut().fadeIn();

$(".table1").prepend($tr);

$tr.css("color","#f60");

});

//置底

var $stick = $(".stick");

$stick.click(function(){

var $tr = $(this).parents("tr");

$tr.fadeOut().fadeIn();

$(".table1").append($tr);

$tr.css("color","#f60");

});

//保存

$('.J_save').click(function() {

var url = "www.faxingshe.net";

var forms = $("form").serialize();

$.post(url, forms , function(res) {

if (res > 0) {

antd.message.success('保存成功！');

location.href = 'www.faxingshe.net';

} else {

antd.message.error('保存失败');

return false;

}

});

});

});

其中保存那个方法可以删除不用,这是我自己做项目需求里边用到的功能.

大家可以看到这些功能实现基本都是jquery对页面元素的操作,所有学好jquery是非常nice的哦.以后你也可以对页面效果信手捏来了,嘿嘿.