469,272 Members | 1,429 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,272 developers. It's quick & easy.

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
Aug 11 '08 #1
4 3129
What I have done so far:

Expand|Select|Wrap|Line Numbers
  1.  
  2. PHP:
  3. echo "<td class=\"editable\" ONDBLCLICK=\"editCell(this,'".$tabId."')\">".$value."</td>";
  4.  
  5. javascript
  6. function editCell (cell,tabId) {
  7.     var myElement = $(tabId);
  8.      if (true) { //some checking to be done in database
  9.         var input = document.createElement('TEXTAREA');
  10.         input.value= cell.firstChild.nodeValue;
  11.         //input.addClass('editBox');
  12.         input.setAttribute('rows', 5);
  13.         var length = cell.firstChild.nodeValue.length;
  14.         input.setAttribute('cols', length);
  15.         input.setAttribute('wrap', "PHYSICAL");
  16.             input.onblur = function (evt) { cancelCell(this.parentNode); };
  17.         input.onkeydown = function(evt){
  18.             switch (evt.which) {
  19.                 case 13: //Enter
  20.                     setCell(this.parentNode, this.value);
  21.                     break
  22.                 case 27: //Escape
  23.                     cancelCell(this.parentNode);
  24.                     break    
  25.                 default:
  26.                     //alert(evt.which);
  27.             }
  28.         };
  29.         var oldValue = $('oldValue');
  30.         if(oldValue == null){
  31.            var oldValueDiv=document.createElement("DIV");
  32.            oldValueDiv.id='oldValue';
  33.            oldValueDiv.style.display = "none";
  34.            oldValueDiv.innerHTML=cell.firstChild.nodeValue;
  35.            myElement.appendChild(oldValueDiv); 
  36.         }
  37.         else{
  38.             oldValue.innerHTML=cell.firstChild.nodeValue;
  39.         }
  40.         cell.replaceChild(input, cell.firstChild);    
  41.         input.focus();
  42.         //input.select();
  43.   }
  44. }
  45.  
  46. function setCell (cell,value) {
  47.     if (true)//some checking to be done in database
  48.     {
  49.         cell.replaceChild(document.createTextNode(value), cell.firstChild);    
  50.     }
  51. }
  52. function cancelCell (cell) {
  53.     var oldValue = $('oldValue');
  54.     if (true)//some checking to be done in database
  55.     {
  56.         cell.replaceChild(document.createTextNode(oldValue.innerHTML), cell.firstChild);
  57.     }
  58. }
  59.  
  60.  
Aug 11 '08 #2
acoder
16,027 Expert Mod 8TB
Which part do you need help with?
Aug 11 '08 #3
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
Aug 12 '08 #4
acoder
16,027 Expert Mod 8TB
Yes, and so can any library that supports effects, or you can code your own with setInterval and the DOM.
Aug 12 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Finn Newick | last post: by
8 posts views Thread by Jukka K. Korpela | last post: by
1 post views Thread by Mark Carroll | last post: by
5 posts views Thread by Richard Dixson | last post: by
1 post views Thread by John Wright | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.