473,841 Members | 1,674 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Edit table cells

dreamfalcon
20 New Member
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
Aug 11 '08 #1
4 3347
dreamfalcon
20 New Member
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 Recognized Expert Moderator MVP
Which part do you need help with?
Aug 11 '08 #3
dreamfalcon
20 New Member
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 Recognized Expert Moderator MVP
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
7743
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 some selectable user preferences). This works as intended in Netscape 7 - all the cells stack vertically above each other nicely, but not in Internet Explorer 6 where the only display property that td will respond to seems to be 'none'.
8
4421
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 markup in the sense that they don't apply the normal default top and bottom margins. This is rather odd, especially
1
2648
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 of just seeing one red rectangle. The CSS in that case had width: 1px; margin: 0; padding: 0; border-width: 0; border-spacing: 0 What can I do to get the red squares nestled together in the table with no space in between? -- Mark
4
26218
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 assume a narrower with than specified. If I comment out the width for the DIV, then the cells render with the correct width and height. Why is this happening? Thanks. Regards, N. Demos
0
1691
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 table cells. This all renders correctly in MSIE 6.x, but doesn't in Firefox. In Firefox, the cell widths are reduced so that all the cells are displayed within the div frame. I've played around with this: commenting out css properties to see if...
3
5918
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 table cells. This all renders correctly in MSIE 6.x, but doesn't in Firefox. In Firefox, the cell widths are reduced so that all the cells are displayed within the div frame. I've played around with this: commenting out css properties to see if...
5
36883
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 code behind. However I am not able to do this at all, I am going about this wrong, I think and need guideance. If this was just straight HTML I would do this: <table> <tr><td>field 1</td><td>value 1 set by code behind</td></tr>
2
3044
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 length. <html> <head> <title>Rapid Blocking Interface</title> <style> .calendar {
1
1357
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 that I would like the user to edit the value (which is empty to begin with) and add their own value. I have the grid bound just fine, and I have enabled editing on the grid, but I can't get the grid to edit the cells. My plan would be to...
1
10667
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10303
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7848
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7025
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5691
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5880
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4498
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4082
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3140
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.