代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.4.2.js"></script>
<style>
#book {
background: white;
padding: 10px;
}
#chapter .bookname {
padding: 10px 10px 10px 0;
font-size: 18px;
font-weight: bold;
}
.tile__list p {
padding-left: 20px;
}
.tile__name {
background: #f6f5f5;
border-left: 12px solid #2596cc;
font-size: 16px;
font-weight: bold;
padding: 6px;
}
.addpbtn,.delppbtn ,.delpbtn {
margin-left: 10px;
}
#coursesections{
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<div id="book">
<div id="chapter">
<div class="bookname">
点击右侧+号添加<i style="margin-left:30px;" class="fa fa-lg fa-plus-circle addbtn"></i>
</div>
</div>
</div>
<inputBfwOnclick="domtojson()" type="button" value="转成json" /> <inputBfwOnclick="jsontodom()" type="button" value="从json读取" />
<textarea id="coursesections" name="coursesections" rows="12" cols="10"></textarea>
</div>
<script type="text/javascript">
var globelj=0;
$(function(){
Init();
});
function jsontodom(){
$("#chapter").children(".tile").remove();
let obj= JSON.parse( $("#coursesections").val()); //
let j=0;
for (let key in obj) {
$("#chapter").append('<div class="layer tile" ><div class="tile__name"> <span>'+key+'</span><i class="fa fa-plus-square-o addpbtn"></i><i class="fa fa-trash-o delpbtn"></i></div><div class="tile__list" id="list'+j+'"></div></div>');
for (let i = 0; i < obj[key].length; i++) {
$("#list"+j).append('<p><span>'+obj[key][i]+'</span><i class="fa fa-trash-o delppbtn"></i></p>');
}
j++;
}
}
function domtojson(){
var array={};
$("#chapter .tile").each(function(){
var ppp=$(this);
var subarr=[];
//str+=ppp.children(".tile__name").find("span").html()+"#";
ppp.children(".tile__list").find("span").each(function(){
subarr.push($(this).html());
});
array[ppp.children(".tile__name").find("span").html()] = subarr;
// array.push(subarr);
});
$("#coursesections").val(JSON.stringify(array));
}
var nowobj=null;
function Init(){
$(".addpbtn").live("click",function() {
nowobj=$(this).parent().siblings(".tile__list");
nowobj.append('<p><span>双击输入</span><i class="fa fa-trash-o delppbtn"></i></p>');
// $(this).parent().siblings(".tile__list").append('<p><span>未命名</span><i class="fa fa-trash-o delppbtn"></i></p>');
});
$(".addbtn").live("click",function() {
$("#chapter").append('<div class="layer tile"><div class="tile__name"> <span>未命名'+globelj+'</span><i class="fa fa-plus-square-o addpbtn"></i><i class="fa fa-trash-o delpbtn"></i></div><div class="tile__list"></div></div>');
globelj++;
});
$(".delppbtn").live("click", function() {
$(this).parent().remove();
});
$(".delpbtn").live("click", function() {
$(this).parent().parent().remove();
});
$(".tile__name span").live("dblclick", function() {
$(this).attr("contenteditable", true);
});
$(".tile__name span").live("blur", function() {
$(this).attr("contenteditable", false);
});
$(".tile__list span").live("dblclick", function() {
$(this).attr("contenteditable", true);
});
$(".tile__list span").live("blur", function() {
$(this).attr("contenteditable", false);
});
}
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
