代码如下：
<!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>
网友回复
我知道答案，我要回答
私活外包
最新提问
如何编写一个chrome插件实现多线程高速下载大文件？
cdn版本的vue在网页中出现typeerror错误无法找到错误代码位置怎么办？
pywebview能否使用webrtc远程控制共享桌面和摄像头？
pywebview6.0如何让窗体接受拖拽文件获取真实的文件路径？
如何在linux系统中同时能安装运行apk的安卓应用？
python有没有离线验证码识别ocr库？
各家的ai图生视频及文生视频的api价格谁最便宜？
openai、gemini、qwen3-vl、Doubao-Seed-1.6在ui截图视觉定位这款哪家更强更准？
如何在linux上创建一个沙箱隔离的目录让python使用？
pywebview如何使用浏览器自带语音识别与webspeech 的api？
