<!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
提交
取消
