<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分类名称</title>
<style>
h2,ul,li{margin:0;padding:0;}
#list{height:149px;width:570px;margin:0 auto;border:1px solid #ccc;}
ul h2{height:28px;font-size:18px;border-bottom:1px solid green;background:green;color:#fff;
text-align:left;line-height:27px;padding-left:20px;}
ul li{list-style:none;background:#fff;display:block;height:38px;font-size:18px;
border:1px solid green;color:#333;text-align:left;line-height:39px;padding-left:20px;}
.sm{background: url(../img/di5zhang/bi1.png) no-repeat center center;margin:20px;}
.disp{display:block;}
</style>
<script>
window.onload = function(){
var ul=document.getElementById(‘list‘);
var num=3;
var str=‘<h2>分类名称</h2>‘;
for(var i=0;i<num;i++){
str+=‘<li><ul class="x"><span>妙味课堂1</span><span class="sm">修改</span></ul><ul class="y"style="display:none;"><input type="text" /><span>保存</span><span>取消</span></ul></li>‘;
}
ul.innerHTML=str;
var lis=ul.getElementsByTagName(‘li‘);
function fn(){
for(var i=0;i<lis.length;i++){
fn1(lis[i]);//将每个li传参
}
}
fn();
function fn1(li){
var us=li.getElementsByTagName(‘ul‘);
var ul1=li.getElementsByClassName(‘x‘)[0];//前ul
var ul2=li.getElementsByClassName(‘y‘)[0];//后ul
var xg=li.getElementsByClassName(‘sm‘)[0];//修改
var txt=li.getElementsByTagName(‘input‘)[0];//用户输入
var btn=ul2.getElementsByTagName(‘span‘);//0保存、1取消
var btn2=ul1.getElementsByTagName(‘span‘);//妙味课堂1
var t1=btn2[0].innerHTML;
btn2[1].onclick=function(){//修改
ul1.style.display=‘none‘;
ul2.style.display=‘block‘;
}
btn[0].onclick=function(){//保存
ul1.style.display=‘block‘;
ul2.style.display=‘none‘;
btn2[0].innerHTML=txt.value;
}
btn[1].onclick=function(){//取消
ul1.style.display=‘block‘;
ul2.style.display=‘none‘;
btn2[0].innerHTML=t1;
}
}
};
</script>
</head>
<body>
<div>
<ul id="list"></ul>
</div>
</body>
</html>