<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>modifytext-sunshinegirl</title>
<style>
body,div,ul{
margin:0;
padding:0;
}
div{
width:500px;
font-size:14px;
margin-left:20px;
}
li{
list-style:none;
height:30px;
line-height:30px;
}
#headline{
margin-top:30px;
padding-left:30px;
border-top:1px solid #000;
background:green;
color:white;
height:30px;
line-height:30px;
}
input{
display:none;
float:left;
margin:5px auto 0;
margin-left:5px;
}
#sort{
padding:5px 20px;
}
span{
float:left;
}
img{
float:left;
margin:10px auto 0px;
}
</style>
<script>
window.onload=function(){
//获取元素
oEdit1=document.getElementById("edit1");
oEdit2=document.getElementById("edit2");
oLi1=document.getElementById("li1");
oLi2=document.getElementById("li2");
oInput1=oLi1.getElementsByTagName("input");
oInput2=oLi2.getElementsByTagName("input");
oSpan1=oLi1.getElementsByTagName("span")[0];
oSpan2=oLi2.getElementsByTagName("span")[0];
//自定义函数片断，循环进行不同元素的显示/隐藏操作
function fn(m,n){
for(var i=0;i<m.length;i++){
m[i].style.display=n;
};
};
//自定义函数片断，进行不同元素的显示/隐藏操作
function sd(p,q){
p.style.display=q;
};
//第一个“编辑”的点击事件
oEdit1.onclick=function(){
//先将编辑文本框内value值设为空，将span和img隐藏，文本框、保存、取消显示
oInput1[0].value="";
fn(oInput1,"block");
sd(oEdit1,"none");
sd(oSpan1,"none");
//点击取消时，恢复将span和img显示，文本框、保存、取消隐藏
oInput1[2].onclick=function(){
sd(oEdit1,"block");
sd(oSpan1,"block");
fn(oInput1,"none");
};
//点击保存时，在不为空时，将文本框内的值给span里，然后span和img显示，文本框、保存、取消隐藏
oInput1[1].onclick=function(){
if(oInput1[0].value==""){
alert("不能为空！");
}else{
oSpan1.innerHTML="<span>"+oInput1[0].value+"</span>";
fn(oInput1,"none");
sd(oEdit1,"block");
sd(oSpan1,"block");
}
};
};
//第二个“编辑”的点击事件，与第一个相比除操作元素不同，其他相同
oEdit2.onclick=function(){
oInput2[0].value="";
fn(oInput2,"block");
sd(oEdit2,"none");
sd(oSpan2,"none");
oInput2[2].onclick=function(){
sd(oEdit2,"block");
sd(oSpan2,"block");
fn(oInput2,"none");
};
oInput2[1].onclick=function(){
if(oInput2[0].value==""){
alert("不能为空！");
}else{
oSpan2.innerHTML="<span>"+oInput2[0].value+"</span>";
fn(oInput2,"none");
sd(oEdit2,"block");
sd(oSpan2,"block");
}
};
};
};
</script>
</head>
<body>
<div>
<div id="headline">
<span>分类名称</span>
</div>
<div id="sort">
<ul>
<li id="li1">
<span>HTML日常总结</span>
<img src="http://image.99114.com/upfile/pro/20090803/1536371786.jpg" style="width:14px;height:14px;" id="edit1" title="可编辑"/>
<input type="textbox" class="textbox" id="textbox1" />
<input type="button" value="保存" id="save1"/>
<input type="button" value="取消" id="undo1" />
</li>
<li id="li2">
<span>JavaScript学习感悟</span>
<img src="http://image.99114.com/upfile/pro/20090803/1536371786.jpg" style="width:14px;height:14px;" id="edit2" title="可编辑"/>
<input type="textbox" class="textbox"/>
<input type="button" value="保存"/>
<input type="button" value="取消"/>
</li>
</ul>
</div>
</div>
</body>
</html>