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
<ul class="dropdown-menu showScroll" id="dom1">
<li>
<a href="javascript:void(0)">张三(交大一附院,神经内科)</a>
</li>
<li>
<a href="javascript:void(0)">李四(交大一附院,消化内科)</a>
</li>
<li>
<a href="javascript:void(0)">王五(西京医院,神经内科)</a>
</li>
<li>
<a href="javascript:void(0)">诸葛亮(交大一附院,消化内科)</a>
</li>
<li>
<a href="javascript:void(0)">钟馗(西京医院,神经内科)</a>
</li>
<li>
<a href="javascript:void(0)">孙6(交大一附院,消化内科)</a>
</li>
<li>
<a href="javascript:void(0)">子墨(西京医院,神经内科)</a>
</li>
</ul>
<p>
<button class="btn btn-success btn-small" id="addTable">
添加
</button>
</p>
<p>
<button class="btn btn-small" id="removeList">
移除
</button>
</p>
<ul id="demo" class="dropdown-menu showScroll rightChild" role="menu" aria-labelledby="dropdownMenu">
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 += (" <li>");
str += (" <input name=\'docName\' type=\'checkbox\' value=\'\' /><span>" + sttr + "</span>");
str += (" <a href=\'javascript:void(0)\' class=\'top\'>置顶</a>");
str += (" <a href=\'javascript:void(0)\' class=\'up\'>上移</a>");
str += (" <a href=\'javascript:void(0)\' class=\'down\'>下移</a>");
str += (" <a href=\'javascript:void(0)\' class=\'bottom\'>置底</a>");
str += (" <a href=\'javascript:void(0)\' class=\'remove\'>移除</a>");
str += (" </li>");
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 += ("<li>");
rDLi += ("<a href=\'javascript:void(0)\'>" + rLiText + "</a>");
rDLi += ("</li>");
$("#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 += ("<li>");
rLi += ("<a href=\'javascript:void(0)\'>" + stttr + "</a>");
rLi += ("</li>");
$("#dom1").append(rLi);
stttr = "";
rLi = "";
$(this.parentNode).remove();
break;
}
});
效果:
1.
2.选中某一列
3.点击添加按钮
4.移除支持多选