Edit table cells

[dreamfalcon]

Hi!

I'm looking for a method to edit table cells.
Something similar to Google Docs, that when the user double clicks the cell, it replaces the content with a textbox that grows automatically, and when the user press Enter or clicks out of the cell, it closes and save the modifications.

<td class="editable " ONDBLCLICK="edi tCell(this)">va lue</td>

Any ideas?
Thx

[dreamfalcon]

What I have done so far:

[B]PHP:[/B]
echo "<td class=\"editable\" ONDBLCLICK=\"editCell(this,'".$tabId."')\">".$value."</td>";

[B]Javascript: [/B]
function editCell (cell,tabId) {
	var myElement = $(tabId);
 	if (true) { //some checking to be done in database
	    var input = document.createElement('TEXTAREA');
	    input.value= cell.firstChild.nodeValue;
		//input.addClass('editBox');
		input.setAttribute('rows', 5);
		var length = cell.firstChild.nodeValue.length;
		input.setAttribute('cols', length);
		input.setAttribute('wrap', "PHYSICAL");
	        input.onblur = function (evt) { cancelCell(this.parentNode); };
		input.onkeydown = function(evt){
			switch (evt.which) {
				case 13: //Enter
					setCell(this.parentNode, this.value);
					break
				case 27: //Escape
					cancelCell(this.parentNode);
					break	
				default:
					//alert(evt.which);
			}
		};
		var oldValue = $('oldValue');
		if(oldValue == null){
		   var oldValueDiv=document.createElement("DIV");
		   oldValueDiv.id='oldValue';
		   oldValueDiv.style.display = "none";
		   oldValueDiv.innerHTML=cell.firstChild.nodeValue;
		   myElement.appendChild(oldValueDiv); 
		}
		else{
			oldValue.innerHTML=cell.firstChild.nodeValue;
		}
	    cell.replaceChild(input, cell.firstChild);	
	    input.focus();
	    //input.select();
  }
}

function setCell (cell,value) {
	if (true)//some checking to be done in database
	{
		cell.replaceChild(document.createTextNode(value), cell.firstChild);	
	}
}
function cancelCell (cell) {
	var oldValue = $('oldValue');
	if (true)//some checking to be done in database
	{
		cell.replaceChild(document.createTextNode(oldValue.innerHTML), cell.firstChild);
	}
}

[acoder]

Which part do you need help with?

[dreamfalcon]

Which part do you need help with?

Just ideas, if anyone has done or seem some better code to accomplish this.
For a example, a way so the textarea grows automatically.
Can mootools help?
Thx

[acoder]

Yes, and so can any library that supports effects, or you can code your own with setInterval and the DOM.