代码如下：
<!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>
网友回复
我知道答案，我要回答
私活外包
最新提问
js如何流式输出ai的回答并折叠代码块，点击代码块右侧可预览代码？
ai大模型如何将文章转换成可视化一目了然的图片流程图图表？
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写？
rtsp视频直播流如何转换成websocket流在h5页面上观看？
为啥coze会开源工作流agent coze studio？
如何检测网页是通过收藏夹打开的？
python如何实现类似php的http动态脚本请求处理响应代码？
js如何实现类似php的http动态脚本请求处理响应代码？
trae与solo有啥区别不同？
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务？
