Here's a fiddle: http://jsfiddle.net/manishie/pZHMN/
It could use some refactoring, but it does what you want. Basically you save the original value as a data attribute of the enclosing div. If a user saves, you save the new value. If a user cancels, you grab the old value from the data attribute and put that back in.
HTML:
<form id="theform">
<div>
<div class="first editable">First Name</div>
<div class="last editable">Last Name</div>
<div class="edit">edit</div>
<div class="save" style="display:none;">save</div>
<div class="cancel" style="display:none;">cancel</div>
</div>
</form>
Javascript:
$('.edit').click(function() {
$('.edit').hide();
$('.save,.cancel').show();
$('.editable').each(function(index, el) {
$(el).attr('data-orig', $(el).html());
$(el).html('<input type="text" value="' + $(el).attr('data-orig') + '">');
});
});
$('.save').click(function() {
$('.edit').show();
$('.save,.cancel').hide();
$('.editable').each(function(index, el) {
$(el).attr('data-orig', '');
$(el).html($(el).find('input').val());
});
});
$('.cancel').click(function() {
$('.edit').show();
$('.save,.cancel').hide();
$('.editable').each(function(index, el) {
$(el).html($(el).attr('data-orig'));
$(el).attr('data-orig', '');
});
});