Estou puxando um conteúdo da matriz PHP e tenho uma situação como esta:

 <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...

gora, quando alguém clica em Editar dentro, digamos, da primeira div, onde o peso é de 100 libras, eu só preciso que esse "div" mude e tenha um campo de entrada em vez de um texto simples onde o peso esteja (enquanto outros permanecerão iguais) e seja assim:

<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..

Então basicamente o div precisa "recarregar-se" e alterar o conteúdo. Agora eu realmente preciso de uma solução Javascript muito simples. De preferência, eu gostaria de uma solução com uma div oculta abaixo da original, para que eles apenas troquem de lugar quando o usuário clica em EDIT e, no caso, se CANCEL for pressionado para trocar de lugar novamente, para que a div original com texto seja exibida ...

brigado, Peter