html下移,jQuery实现元素的上移下移删除

$(function() {

$('ul li').on('click', function() {

$(this).toggleClass('on').siblings().removeClass('on');

});

/*上移*/

$('.btn1').on('click', function() {

var txt = $('ul .on').children('span').html();

var txt1 = $('ul .on').prev().children('span').html();

var prev = $('ul .on').prev();

if ($('ul .on').length == 1) {

if (prev.length) {

$('ul .on').children('span').html(txt1);

prev.children('span').html(txt);

prev.addClass('on').siblings().removeClass('on');

} else {

alert('已经在最顶端了');

};

} else {

alert('请选择要上移的元素');

};

});

/*下移*/

$('.btn2').on('click', function() {

var txt = $('ul .on').children('span').html();

var txt1 = $('ul .on').next().children('span').html();

var next = $('ul .on').next();

if ($('ul .on').length == 1) {

if (next.length) {

$('ul .on').children('span').html(txt1);

next.children('span').html(txt);

next.addClass('on').siblings().removeClass('on');

} else {

alert('已经在最底端了');

};

} else {

alert('请选择要下移的元素');

};

});

/*删除*/

$('.btn3').on('click', function() {

if ($('ul .on').length == 1) {

$('ul .on').hide();

} else {

alert('请选择要删除的元素');

}

});

})

html下移,jQuery实现元素的上移下移删除相关推荐

jQuery实现表格行上移下移和置顶
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
navicat表栏上移下移_利用jqgrid实现上移下移单元格功能
前言 JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. 在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中, ...
html ul 位置上移,JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）...
JS移动li行数据,点击上移下移 * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:50 ...
Layui 设置多个穿梭框，并增加上移下移置顶置底功能
Layui 设置多个穿梭框,并增加上移下移置顶置底功能介绍针对layui穿梭框进行了一些修改,增加上移下移置顶置底功能,设置了右侧框的排序功能,按序取值,按序加载的功能. 基于layui 2.5. ...
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
多行上移下移主要代码实现效果,勾选多行整体上移或者下移 //移动后更新排序moveUpdateSort(tableList){for(let i in tableList){//tableList ...
xtragrid 上移下移
xtragrid 实现焦点行的上移下移主要还是对gridviw绑定的数据表的操作,如果只是简单的显示而不做保存操作那么比较简单,直接把绑定的数据表中的前后两行更换下数据,具体如下: 代码 priva ...
数据上移下移简单的存储过程
上移下移存储过程改存储过程只有两个参数,要移动的id和排序的方式.tabelname需要动态的改变! WG_sysConfig是要改变的哦tabelName,id是排序主键,orderid是排序字段 ...
前端js实现表格数据的上移下移
vue项目需求中需要前端实现表格行数据的上移下移,效果如下实现思路:主要使用前端对数组的操作方法splice() 代码: tableData: [{name: '1',id: '1'}, {name ...
bootstrap表格的上移下移
关于程序员小李的第一篇文章 bootstrap的上移下移功能 1.关于创建表格及表格数据获取 json数据格式 2.关于列的渲染 3.重要部分上移下移的代码部分 ps. 用bootstrap时遇到过 ...

html下移,jQuery实现元素的上移下移删除

html下移,jQuery实现元素的上移下移删除相关推荐

最新文章

热门文章