473,320 Members | 2,117 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 3329
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

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

Similar topics

6
by: Finn Newick | last post by:
By defining a style as follows: @media aural, handheld {td.layout {display:block;}} I'm hoping to linearise layout tables when viewed by screenreaders and handheld devices (it is also be in...
8
by: Jukka K. Korpela | last post by:
I just noticed that most browsers render <table border="1"><tr><td><p>foo</p></td></tr></table> the same way as <table border="1"><tr><td>foo</td></tr></table> That is, they ignore the p...
1
by: Mark Carroll | last post by:
I can't get my table cells to not have a gap between them in IE. For example, with IE6SP1 I get a gap between the two red squares on http://www.chiark.greenend.org.uk/~markc/test/test.html instead...
4
by: N. Demos | last post by:
The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells...
0
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two...
3
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two...
5
by: Richard Dixson | last post by:
I created a new C# web application. Basically all I am trying to do is create a table that consists of a few rows with two columns in each. And then to set those columns to text values from my...
2
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the...
1
by: John Wright | last post by:
I have a datagridview control that I have added 5 columns to. I bind the datagrid to a datatable that I get from another function. Once of the rows returned from the function is an empty field...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.