代码如下:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改文本框的值</title>
<style>
*{margin:0;padding:0;}
li {list-style:none;}
.menu {width:300px;margin:20px auto;border:1px solid #36F;}
.menu h4 {text-indent:20px;color:#FFF;background:#0C0;height:30px;line-height:30px;}
.menu li {padding-left:10px;border-bottom:1px solid #CCC;}
.show,.hide {height:40px;line-height:40px;}
.show span {float:left; margin-left:10px;}
.show a {float:right;margin-right:20px;}
.hide {display:none;}
.hide input {border:1px solid #096;height:25px;line-height:25px;}
.hide a {color:#0C6;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
for(var i= 0; i<aLi.length;i++)
Edit(aLi[i]);
function Edit(li){
var aDiv = li.getElementsByTagName('div');
var oSpan = li.getElementsByTagName('span')[0];
var aA = li.getElementsByTagName('a');
var oInput = li.getElementsByTagName('input')[0];
//编辑
aA[0].onclick = function (){
aDiv[0].style.display = 'none';
aDiv[1].style.display = 'block';
oInput.value = oSpan.innerHTML;
};
//保存
aA[1].onclick = function (){
aDiv[0].style.display = 'block';
aDiv[1].style.display = 'none';
oSpan.innerHTML = oInput.value;
};
//取消
aA[2].onclick = function (){
aDiv[0].style.display = 'block';
aDiv[1].style.display = 'none';
};
};
};
</script>
</head>
<body>
<div class="menu">
<h4>分类名称</h4>
<ul id="list">
<li>
<div class="show">
<span>abcd</span>
<a href="#">编辑</a>
</div>
<div class="hide">
<input type="text" />
<a href="#" >保存</a>
<a href="#" >取消</a>
</div>
</li>
<li>
<div class="show">
<span>猪猪侠</span>
<a href="#">编辑</a>
</div>
<div class="hide">
<input type="text" />
<a href="#" >保存</a>
<a href="#" >取消</a>
</div>
</li>
</ul>
</div>
</body>
</html>