jquery行上移下移删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery上移下移删除</title>

<script type="text/javascript" src="http://youwuku.cn/egou/js/jquery-1.7.2.min.js?v=201211292311"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".up").click(function(){
var onthis = $(this).parent("span").parent("li");
var getup = $(this).parent("span").parent("li").prev();
$(getup).before(onthis);
});
$(".down").click(function(){
var onthis = $(this).parent("span").parent("li");
var getdown = $(this).parent("span").parent("li").next();
$(getdown).after(onthis);
});
$(".del").click(function(){
var onthis = $(this).parent("span").parent("li");
onthis.remove()
});
});
</script>
</head>
<body>
<ul>
<li><span>1</span><span id="1"><a href="#" class="up">上移</a> | <a href="#" class="down">下移</a> | <a href="#" class="del">删除</a></span></li>
<li><span>2</span><span id="2"><a href="#" class="up">上移</a> | <a href="#" class="down">下移</a> | <a href="#" class="del">删除</a></span></li>
<li><span>3</span><span id="3"><a href="#" class="up">上移</a> | <a href="#" class="down">下移</a> | <a href="#" class="del">删除</a></span></li>
</ul>
</body>
</html>

jquery行上移下移删除

时间: 2024-10-27 18:02:28

jquery行上移下移删除的相关文章

easyUI table行上移下移 同时更新序号可使保存按新顺序

//上移 function upBtn() { var selected = $('#caseTable').datagrid('getSelected'); var index = $('#caseTable').datagrid('getRowIndex',selected); if(index==0){ $.messager.alert('系统提示', '顶行无法上移!', 'warning'); } else { var rows = $('#caseTable').datagrid('

JS~一个列表中包含上移下移删除等功能

最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图 看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML <ul class="clearfix"> <li class="courseList"> <div class=&

AngularJS实现数据列表的增加、删除和上移下移等功能实例

转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看. 效果图 实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head&g

利用jQuery操作select列表选项的上移下移示例

导读:本文实现了一个简单的select列表选项的上移下移操作,可帮助读者了解jQuery选择器,节点操作的一些常用方法 实现的效果: 分享代码: 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MoveNode_Default" %> 2 3 <!DOCTYPE html PUBLIC &

jquery easyui datagrid设置行样式 不可删除某行

rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSuccess:function(data){ var rows = data.rows; for (var j = 0; j < rows.length; j++) { if (parseInt(rows[j]["ksrs"]) > 0) { $(".datagrid-

js 上移下移行

function up_tr(sender) {                            var tr = $(sender).parent().parent();                            var table = tr.parent();                            var first = $("tr:first", table);                            if (tr.html() =

JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; cha

JavaScript(20)jQuery HTML 加入和删除元素

jQuery - 加元 经 jQuery,可以非常easy增加了新的元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); jQu

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>