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
4 3329
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);
-
}
-
}
-
-
Which part do you need help with?
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
Yes, and so can any library that supports effects, or you can code your own with setInterval and the DOM.
Sign in to post your reply or Sign up for a free account.
Similar topics
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
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...
|
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...
|
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)...
|
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....
|
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
|
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...
| |