自己写的一个网页里面的删除和新增的js。逻辑过于复杂，而且不能实现所有的功能。但是也是自己的一些成果。有借鉴的可以问问我
//点击的是二级权限
$(".select").click(function () {
var m = 0;
//阻止事件冒泡
var e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
//冒泡结束
var l = $(this).parent().parent().find("li input").length;
// selected2 = $(this).parent().parent().find("li").eq(0)[0];
for (var i = 0; i < l; i++) {
if ($(this).parent().parent().find("li input").eq(i)[0].checked == true) {
m++;
}
}
if (m == l) {
$(this).parent().parent().prev().find("input")[0].checked = true;
} else {
$(this).parent().parent().prev().find("input")[0].checked = false;
}
})
//点击的是一级权限
$(".selectParent").click(function () {
//阻止事件冒泡
var e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
if ($(this)[0].checked === true) {
isChecked($(this));
} else {
cancelChecked($(this));
}
})
//点击的是Li标签
$(".selectTr").click(function () {
var m = 0;
if ($(this).find("input")[0].checked === false) {
$(this).find("input")[0].checked = true;
} else {
$(this).find("input")[0].checked = false;
}
var l = $(this).parent().find("li input").length;
for (var i = 0; i < l; i++) {
if ($(this).parent().find("li input").eq(i)[0].checked == true) {
m++;
}
}
if (m == l) {
$(this).parent().prev().find("input")[0].checked = true;
} else {
$(this).parent().prev().find("input")[0].checked = false;
}
})
function cancelChecked($dom) {
var l = $dom.parent().next().find("li input").length;
for (var i = 0; i < l; i++) {
$dom.parent().next().find("li input").eq(i)[0].checked = false;
}
}
function isChecked($dom) {
abc = $dom.parent().next().find("li");
var l = $dom.parent().next().find("li input").length;
for (var i = 0; i < l; i++) {
$dom.parent().next().find("li input").eq(i)[0].checked = true;
}
}
$("#add").click(function () {
addOrDelete($("#ok"));
//添加到右边
})
function addOrDelete($dom) {
var l = $dom.find(".information").length;
console.log(l);
var arr = [];
//这里有两种情况，第一种当第一级选中的时候直接把父级和子级以及push到arr里面。第二种当父级没选中的时候遍历里面的子级然后push到arr中
for (var i = 0; i < l; i++) {
var tr = [];
var trL = $dom.find(".information").eq(i).next().find("li a").length;
if ($dom.find(".information").eq(i).find("input")[0].checked == true) {
for (var j = 0; j < trL; j++) {
tr.push($dom.find(".information").eq(i).next().find("li a").eq(j).html());
}
arr.push({
th: $dom.find(".information").eq(i).html().replace(/<input type="checkbox" class="selectParent">/g, ""),
tr: tr
});
console.log("lianggeyiqi:" + arr);
console.log(arr);
console.log(99999);
} else {
for (var j = 0; j < trL; j++) {
if ($dom.find(".information").eq(i).next().find("li input").eq(j)[0].checked === true) {
tr.push($dom.find(".information").eq(i).next().find("li a").eq(j).html());
}
}
if (tr.length > 0) {
arr.push({
th: $dom.find(".information").eq(i).html().replace(/<input type="checkbox" class="selectParent">/g, ""),
tr: tr
});
}
}
}
addToLOR(arr, $dom);
for (var i = l - 1; i >= 0; i--) {
console.log(123456789);
var trL = $dom.find(".information").eq(i).next().find("li a").length;
if ($dom.find(".information").eq(i).find("input")[0].checked == true) {
//移除左边的勾选内容
$dom.find("div").eq(i).remove();
} else {
for (var j = trL - 1; j >= 0; j--) {
if ($dom.find(".information").eq(i).next().find("li input").eq(j)[0].checked === true) {
$dom.find(".information").eq(i).next().find("li").eq(j).remove();
}
}
}
}
}
//添加到右边或则左边
function addToLOR(arr, $dom) {
var str = "";
var isHava = 0;//0表示没有一样的头。否则有
var dijige = 0;
var $other = "";
if ($dom[0].id == 'addOrDel') {
$other = $('#ok');
} else {
$other = $('#addOrDel');
}
for (var i = 0; i < arr.length; i++) {
//遍历数组然后查询已经添加的里面有没有一样的头部，如果没有就直接加整个div。不然把添加的内容加到对应的ul里面去。
for (var m = 0; m < $other.find("div").length; m++) {
console.log($other.find("div").eq(m).find("a:first-child"));
if ($other.find("div").eq(m).find("a:first-child").html().replace(/<input type="checkbox" class="selectParent">/g, "") == arr[i].th) {
isHava++;
dijige = m;
}
}
if (isHava == 0) {
str = ' <div id="user2"><a class="one information"><input type="checkbox" class="selectParent">' + arr[i].th + '</a>';
str += ' <ul class="kid">';
for (var j = 0; j < arr[i].tr.length; j++) {
str += ' <li class="selectTr"><b class="tip"></b><input type="checkbox" class="select"><a';
str += ' target="Conframe"';
str += ' href="html/UserCostinfo.html"';
str += ' class="select">' + arr[i].tr[j] + '</a></li>';
}
str += ' </ul>';
str += ' </div>';
console.log(str);
$other.append(str);
} else {
console.log(arr[i].tr);
console.log("changdu:" + arr[i].tr.length);
for (var j = 0; j < arr[i].tr.length; j++) {
str += ' <li class="selectTr"><b class="tip"></b><input type="checkbox" class="select"><a';
str += ' target="Conframe"';
str += ' href="html/UserCostinfo.html"';
str += ' class="select">' + arr[i].tr[j] + '</a></li>';
}
console.log(str);
$other.find("div ul").eq(dijige).append(str);
}
}
//点击的是二级权限
$(".select").click(function () {
var m = 0;
//阻止事件冒泡
var e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
//冒泡结束
var l = $(this).parent().parent().find("li input").length;
// selected2 = $(this).parent().parent().find("li").eq(0)[0];
for (var i = 0; i < l; i++) {
if ($(this).parent().parent().find("li input").eq(i)[0].checked == true) {
m++;
}
}
if (m == l) {
$(this).parent().parent().prev().find("input")[0].checked = true;
} else {
$(this).parent().parent().prev().find("input")[0].checked = false;
}
})
//点击的是一级权限
$(".selectParent").click(function () {
//阻止事件冒泡
var e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
if ($(this)[0].checked === true) {
isChecked($(this));
} else {
cancelChecked($(this));
}
})
//点击的是Li标签
$(".selectTr").click(function () {
var m = 0;
if ($(this).find("input")[0].checked === false) {
$(this).find("input")[0].checked = true;
} else {
$(this).find("input")[0].checked = false;
}
var l = $(this).parent().find("li input").length;
for (var i = 0; i < l; i++) {
if ($(this).parent().find("li input").eq(i)[0].checked == true) {
m++;
}
}
if (m == l) {
$(this).parent().prev().find("input")[0].checked = true;
} else {
$(this).parent().prev().find("input")[0].checked = false;
}
})
function cancelChecked($dom) {
var l = $dom.parent().next().find("li input").length;
for (var i = 0; i < l; i++) {
$dom.parent().next().find("li input").eq(i)[0].checked = false;
}
}
function isChecked($dom) {
abc = $dom.parent().next().find("li");
var l = $dom.parent().next().find("li input").length;
for (var i = 0; i < l; i++) {
$dom.parent().next().find("li input").eq(i)[0].checked = true;
}
}
}
// 这里做的是删除刚刚添加的不必要的选项
$("#cancel").click(function () {
addOrDelete($('#addOrDel'));
})
})