Javascript 在单击时更改 div 内容

Question

我正在从 PHP 数组中提取内容，我遇到了这样的情况:

 <div class="weight-display">
 <span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
 </div>
 <div class="weight-display">
 <span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
 </div>
 etc...

现在，当有人在其中单击“编辑”时，比方说，第一个重量为 100 磅的 div，我只需要更改“div”并具有输入字段而不是重量为的简单文本(而其他将保持不变)并且要像这样:

<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..

所以基本上 div 必须“重新加载自身”并更改内容。现在我真的需要一些非常简单的 Javascript 解决方案。最好我想要一个在原始 div 下面有一个隐藏 div 的解决方案，这样当用户单击 EDIT 时它们就交换位置，如果按下 CANCEL 再次交换位置，那么显示带有文本的原始 div ...

谢谢， 彼得

Answer 1

<style type="text/css">
    /* Normal mode */
    .weight-display div.edit {display:none}
    /* Editor mode */
    .weight-edit div.show {display:none}
</style>
<div class="weight-display">
    <button onclick="toggle(this)">Edit this!</button>
    <div class="edit"><input type="text" value="Test" /></div>
    <div class="show">Test</div>
</div>
<script type="text/javascript">
    function toggle(button)
    {
        // Change the button caption
        button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
        // Change the parent div's CSS class
        var div = button.parentNode;
        div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
    }
</script>