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="editCell(this)">value</td>

Any ideas?
Thx

[dreamfalcon]

What I have done so far:

 
 PHP:
echo "<td class=\"editable\" ONDBLCLICK=\"editCell(this,'".$tabId."')\">".$value."</td>";
 
 javascript: 
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.