代码如下：
<!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>
网友回复
我知道答案，我要回答
私活外包
最新提问
DLNA与UPnP的区别和不同？
苏超自建抢票app，通过先预约再抽签化解高并发抢票？
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？
如何结合python+js如何自己的视频编码与加密播放直播？
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？
有没有可免费观看全球电视台直播m3u8地址url的合集？
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？
python如何实时检测电脑usb插入检测报警？
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？
