jquery上移、下移、置顶、置底、添加、移除事件

jquery上移、下移、置顶、置底、添加、移除事件

引入jquery.js

1.css

ul {
			border: 1px solid #AAAAAA;
			height: 100px;
			overflow-y: scroll;
		}
		
		ul li {
			list-style: none;
		}
		
		a {
			text-decoration: none;
			color: #000000;
		}
		.active{
			color: red;
		}

2.html

			

				张三（交大一附院，神经内科）
			
			

				李四（交大一附院，消化内科）
			
			

				王五（西京医院，神经内科）
			
			

				诸葛亮（交大一附院，消化内科）
			
			

				钟馗（西京医院，神经内科）
			
			

				孙6（交大一附院，消化内科）
			
			

				子墨（西京医院，神经内科）
			
		
		

			
				添加
			
		
		

			
				移除
			
		
		

3.js

$(document).ready(function() {
				var sttr = ""; //选中左边li的值
				var obj = ""; //左边选中的第几列
				$("#dom1").on('click', 'a', function() {
					obj = $(this.parentNode).index();
					sttr = $(this).text();
					$(this).addClass("active");
					$(this).parent().siblings().find("a").removeClass("active");
				});

				///添加
				var str = ""; //构造右边新的li
				$("#addTable").click(function() {
					if(sttr != "") {
						$("#dom1").find("li").eq([obj]).remove();
						str += (" 
");
						str += ("                    " + sttr + "");
						str += ("                    置顶");
						str += ("                    上移");
						str += ("                    下移");
						str += ("                    置底");
						str += ("                    移除");
						str += ("                
");
						str += ("");
						$("#demo").append(str);
						sttr = "";
						str = "";
					}
				});

				/多选移除
				var rLiText = ""; //右边li中span的text值（可多选）
				var rDLi = ""; //构造左边新的li
				$("#removeList").click(function() {
					var check = document.getElementsByName("docName");
					for(var i = 0; i < check.length; i++) {
						if(check[i].checked) {
							rLiText = $("#demo").find("li").eq([i]).find("span").text();
							rDLi += ("
");
							rDLi += ("" + rLiText + "");
							rDLi += ("
");
							$("#dom1").append(rDLi);
							rLiText = "";
							rDLi = "";
							$("#demo").find("li").eq([i]).remove();
							i--;
						}
					}
				});

			});
			var stttr = ""; //右边单个li中span的text值
			var rLi = ""; //构造左边新的li
			$("#demo").on('click', 'a', function() {
				var parent = $(this).parent();
				var parents = $(this).parents("#demo");
				var len = parents.children().length;
				if(($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) {
					alert("已经置顶！");
					return false;
				} else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index() == len - 1) {
					alert("已经置底！");
					return false;
				}
				switch(true) {
					//上移
					case $(this).is(".up"):
						var prev = parent.prev();
						parent.insertBefore(prev);
						break;
						//下移
					case $(this).is(".down"):
						var next = parent.next();
						parent.insertAfter(next);
						break;
						//置顶
					case $(this).is(".top"):
						parents.prepend(parent);
						break;
						//置底
					case $(this).is(".bottom"):
						parents.append(parent);
						break;
						//移除
					case $(this).is(".remove"):
						stttr = $(this.parentNode).find("span").text();
						rLi += ("
");
						rLi += ("" + stttr + "");
						rLi += ("
");
						$("#dom1").append(rLi);
						stttr = "";
						rLi = "";
						$(this.parentNode).remove();
						break;
				}

			});

效果：

1.

2.选中某一列

3.点击添加按钮

4.移除支持多选