Javascript-动态操作分类信息2

动态分类信息操作-JAVASCRIPT1.昨天实现了分类增加,当然没有和实际项目连接，今天呢，实现了分类信息的修改和删除
本想着不写操作了，但想了想，还是写吧，毕竟是常用的东西！

2.html内的标签不变，和上篇一样！

3.js有所修改

//01.生成一级菜单
function chuangyiji(yjval){
var cdy=document.getElementById('yiji');
var html='';
for(var i=0;i<yjval.length;i++){
html+='<li id="'
+yjval[i]+'li"><span>'
+yjval[i]+'<input type="button" value="X" onclick="changedelbtn('
+yjval[i]+'li)"/></span><ul id='
+yjval[i]+'></ul></li>';
}
//添加button按钮
html+='<li id="yijibtn"><input type="button" value="✚" onclick="changeAddbtn(yiji)"/></li>';
cdy.innerHTML=html;
}

//02.生成二级菜单html
function erji(value){
var html='';
for(var j=0;j<value.length;j++){
html+='<li id="'
+value[j]+'li">'
+value[j]+'<input type="button" value="X" onclick="changedelbtn('
+value[j]+'li)"/><input type="button" value="Ψ" onclick="changeupdbtn('
+value[j]+'li)"/></li>';
}
return html;
}

//03.创建二级菜单
function chuangerji(yiji,fenlei){
//创建一级菜单
chuangyiji(yiji);
for (var j=0;j<yiji.length;j++){
//一级值
var key=yiji[j];
var cej=document.getElementById(key);
//拿到二级菜单值
var value=fenlei[key];

//追加新增按钮
var html=erji(value);
html+='<li id="'+key+'btn"><input type="button" value="✚" onclick="changeAddbtn('+key+')"/></li>';
//生成二级
cej.innerHTML=html;

}
}

//04.2 文本框换成文本
function changeTextbtn(id,text){
var btn=document.getElementById(id.id+'btn');
btn.id=text+'li';
//如果是一级菜单的话，添加新增按钮,用来添加添加二级菜单
//console.log(id.id);
if(id.id==='yiji'){
btn.innerHTML='<span>'
+text+'</span><ul id='
+text+'><li id="'
+text+'btn"><input type="button" value="✚" onclick="changeAddbtn('
+text+')"/></li></ul>'
}else{
btn.innerHTML='<span>'
+text+'</span><input type="button" value="X" onclick="changedelbtn('
+text+'li)"/><input type="button" value="Ψ" onclick="changeupdbtn('
+text+'li)"/>';
}
id.innerHTML+='<li id="'+id.id+'btn"><input type="button" value="✚" onclick="changeAddbtn('+id.id+')"/></li>';
}

//04.1 按钮换文本框
function changeAddbtn(id){
//console.log('changeAddbtn:'+id.id);
var btn=document.getElementById(id.id+'btn');
//console.log(btn);
btn.innerHTML='<input type="text" name="'+id.id+'add" /><br/><input type="button" value="✔" onclick="addyiji('+id.id+')"/>';

}

//04.新增一级菜单事件
function addyiji(id){
console.log('addyiji:'+id.id);
//创建输入
var text=document.getElementsByName(id.id+'add')[0].value;
//界面显示
if(text.trim()==''){
alert('不可为空');
}else{
changeTextbtn(id,text);
}
//提交服务器数据
//这里不实现了
}

//05.删除按钮实现
function changedelbtn(id){
// console.log(id);
if(confirm('你确定要删除吗？不可恢复')){
//这里进行网络请求,删除数据库信息，重新加载
id.innerHTML='已删除';
}
}

//06.修改按钮实现
function changeupdbtn(id){
console.log(id.id.substring(0,id.id.length-2));
id.innerHTML='<input type="text" name="'+id.id+'add" value="'+id.id.substring(0,id.id.length-2)+'"/><br/><input type="button" value="✔" onclick="upbtnclick('+id.id+')"/>';
}

function upbtnclick(id){
console.log(id);
var text=document.getElementsByName(id.id+'add')[0].value;
id.id=text+'li';
id.innerHTML='<span>'
+text+'</span><input type="button" value="X" onclick="changedelbtn('
+text+'li)"/><input type="button" value="Ψ" onclick="changeupdbtn('
+text+'li)"/>';
}

window.onload=function(){

var yiji=['文章','杂谈','分享','经验'];

var fenlei={
"文章": [
"Csharp",
"Java",
"Android",
"javascript"
]
,
"杂谈": [
"励志",
"惊险",
"懂得"
]
,
"分享": [
"电影",
"书籍",
"类库",
"教学视频"
]
,
"经验": [
"浅谈",
"思考",
"技术"
]
};

chuangerji(yiji,fenlei);

};4.效果图如下所示：
 


5.资源地址：点击打开资源下载链接