<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>index</title>
<script type="text/javascript">
window.onload = function() {
var pElements = document.getElementsByTagName('p');
for (var i=0; i < pElements.length; i++) {
if(pElements[i].className == 'editable')
pElements[i].onclick = function() {inPlaceEditor(this);};
};
};
function inPlaceEditor (editableElement) {
//Getting the text from the p-element
var text = editableElement.innerHTML;
var padre = document.createElement('p');
// create and style the textarea element
var textarea = document.createElement('textarea');
textarea.setAttribute('cols', '10');
textarea.setAttribute('rows', '5');
textarea.style.width = "100%";
// Create the text for the textarea (the same text saved from p-elemnt)
var nyText = document.createTextNode(text);
// Put all together
textarea.appendChild(nyText);
padre.appendChild(textarea);
editableElement.parentNode.replaceChild(padre, editableElement);
//Creating and styling the buttons
var editbutton = document.createElement('input');
editbutton.setAttribute('type', 'button');
editbutton.setAttribute('value', 'Editar');
editbutton.onclick = function() {edit(this.parentNode, this.parentNode.firstChild.value);};
var cancelbutton = document.createElement('input');
cancelbutton.setAttribute('type', 'button');
cancelbutton.setAttribute('value', 'Cancelar');
cancelbutton.onclick = function() {cancel(this.parentNode, text);};
//Setting the buttons on the page
textarea.parentNode.insertBefore(cancelbutton, textarea.nextSibling);
textarea.parentNode.insertBefore(editbutton, textarea.nextSibling);
};
function cancel(parrafo, texto){
var pElement = document.createElement('p');
pElement.setAttribute('class', 'editable');
pElement.onclick= function() {inPlaceEditor(this);};
var original = document.createTextNode(texto);
pElement.appendChild(original);
parrafo.parentNode.replaceChild(pElement, parrafo);
};
function edit(parrafo, texto){
var pElement = document.createElement('p');
pElement.setAttribute('class', 'editable');
pElement.onclick= function() {inPlaceEditor(this);};
var original = document.createTextNode(texto);
pElement.appendChild(original);
parrafo.parentNode.replaceChild(pElement, parrafo);
};
</script>
</head>
<body>
<div id="content">
<h1>Los siguientes parrafos se pueden editar</h1>
<p class="editable">Texto editable</p>
<p class="editable">Texto editable</p>
<h2>Los siguientes parrafos no se pueden editar</h2>
<p class="not_editable">Texto no editable</p>
</div>
</body>
</html>