<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
padding: 20px;
}
#list
{
list-style: none;
width: 400px;
border: 1px solid #666666;
}
li
{
list-style: none;
background: #a7cbff;
margin: 10px 0;
height: 30px;
position: relative;
}
li button
{
display: none;
position: absolute;
right: 3px;
top: 3px;
}
li:hover button
{
display: inline-block;
}
textarea
{
display: block;
width: 400px;
height: 50px;
margin: 10px 0;
}
</style>
<script type="text/javascript">
window.onload = function()
{
// 获取元素
var lis = document.getElementById('list').getElementsByTagName('li');
var text = document.getElementById('text');
var ok = document.getElementById('ok');
var edit = document.getElementById('edit');
// 当前编辑的节点
var cur;
// 遍历编辑按钮，添加点击事件，把当前父节点存入变量cur, 并显示输入框
for (var i = 0; i < lis.length; i++)
{
for (var j = 0; j< 10; j++)
{
if (lis[i].childNodes[j].innerHTML == "编辑")
{
lis[i].childNodes[j].onclick = function ()
{
edit.style.display = 'block';
cur = this.parentNode;
text.focus();
}
break;
}
}
}
// 输入框确定按钮添加点击事件，把输入框的内容更新到当先编辑的节点
ok.onclick = function ()
{
cur.innerHTML = '<span>'+ text.value +'</span> <button>编辑</button>';
text.value = '';
edit.style.display = 'none';
}
}
</script>
</head>
<body>
<ul id="list">
<li>
<span>评论1</span>
<button>编辑</button>
</li>
<li>
<span>评论2</span>
<button>编辑</button>
</li>
<li>
<span>评论3</span>
<button>编辑</button>
</li>
<li>
<span>评论4</span>
<button>编辑</button>
</li>
</ul>
<div id="edit" style="display: none">
<textarea id="text"></textarea>
<button id="ok">确定</button>
</div>
</body>
</html>
慕慕6002771
2014-09-11
举报
0/150
提交
取消
