473,320 Members | 1,879 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.

Editable table blues

I'm trying to make an "editable table". You double-click on a table cell, it
becomes a text input element, you edit the value, click outside the text
input and the <td> contents/text node(s) are updated as the text input
deletes itself. Much like file list controls in various operationg systems.

The code below works fine in IE 6 for WinXP (no SP2), but fails in Opera
7.23 and Netscape 7.01. Specifically, onblur doesn't get called, so neither
does editTextToCell() and the text input never goes away. Ideas? Should the
onblur attribute Function be created differently?

(I know I should be more careful about collecting <td> text nodes, this is
just a test)

Joakim Braun

***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function cellToEditText(inNode){

var theTextNode = inNode.firstChild;
var theText = theTextNode.nodeValue;
var theEditText = document.createElement("input");

theEditText.setAttribute("type", "text");
theEditText.setAttribute("size", theText.length + 4);
theEditText.setAttribute("id", "dyntext");
theEditText.setAttribute("value", theText);
theEditText.setAttribute("onblur", new Function("editTextToCell(this)"));

theTextNode.parentNode.removeChild(theTextNode);
theTextNode.nodeValue="";
inNode.appendChild(theEditText);
theEditText.focus();
theEditText.select();
}

function editTextToCell(inInputNode){
var theText = inInputNode.value;
var nodeParent = inInputNode.parentNode;

nodeParent.appendChild(document.createTextNode(the Text));
nodeParent.removeChild(inInputNode);
}

</script>
</head>

<body>

<form name="form1" >
<table border="1">
<caption>Some caption</caption>
<tr>
<td ondblclick="cellToEditText(this)">3,341</td>
<td ondblclick="cellToEditText(this)">66</td>
</tr>
<tr>
<td ondblclick="cellToEditText(this)">4,56</td>
<td ondblclick="cellToEditText(this)">3.988</td>
</tr>
</table>
</form>
</body>
</html>
Jul 23 '05 #1
2 1441
Joakim Braun wrote:
[...]
The code below works fine in IE 6 for WinXP (no SP2), but fails in Opera
7.23 and Netscape 7.01. Specifically, onblur doesn't get called, so neither
does editTextToCell() and the text input never goes away. Ideas? Should the
onblur attribute Function be created differently?
It doesn't work in Safari either, comments below

(I know I should be more careful about collecting <td> text nodes, this is
just a test)
Yes, don't assume that the firstChild will be what you expect it to be,
but given that...

[...] theEditText.setAttribute("type", "text");
Replace setAttribute with

theEditText.type = 'text';

and the same for all the following:
theEditText.setAttribute("size", theText.length + 4);
theEditText.setAttribute("id", "dyntext");
theEditText.setAttribute("value", theText);
theEditText.size = +theText.length + 4;
theEditText.id = "dyntext";
theEditText.value = theText;

You set an id on the text input but don't use it. Since the element is
destroyed when onblur is fired, why bother?
theEditText.setAttribute("onblur", new Function("editTextToCell(this)"));
attach the function thusly:

theEditText.onblur = editTextToCell;

[...]
function editTextToCell(inInputNode){
var theText = inInputNode.value;
var nodeParent = inInputNode.parentNode;


function editTextToCell(e){
var inInputNode = this;
var theText = inInputNode.value;
var nodeParent = inInputNode.parentNode;
nodeParent.appendChild(document.createTextNode(the Text));

// All is fine to this point, but
// the following line causes Safari to crash...
nodeParent.removeChild(inInputNode);
}

Full code below signature.

Sorry i can't test in IE at the moment but as far as I know, it should
be OK in IE 6. It works fine in Firefox but crashes Safari as noted.

As an alternative, have you considered just using a prompt to get the
replacement text? Then you just replace the value of the text node,
rather than removing & adding bits and your JavaScript function becomes
just a couple of lines. Just a suggestion.

--
Fred
<script type="text/javascript">
function cellToEditText(inNode){
var theTextNode = inNode.firstChild;
var theText = theTextNode.nodeValue;
var theEditText = document.createElement("input");
// theEditText.setAttribute("type", "text");
theEditText.type = 'text';
// theEditText.setAttribute("size", theText.length + 4);
theEditText.size = +theText.length + 4;
// theEditText.setAttribute("id", "dyntext");
theEditText.id = "dyntext";
// theEditText.setAttribute("value", theText);
theEditText.value = theText;
// theEditText.setAttribute("onblur", new
// Function("editTextToCell(this)"));
theEditText.onblur = editTextToCell;
theTextNode.parentNode.removeChild(theTextNode);
theTextNode.nodeValue="";
inNode.appendChild(theEditText);
theEditText.focus();
theEditText.select();
}
// function editTextToCell(inInputNode){
function editTextToCell(e){
var inInputNode = this;
var theText = inInputNode.value;
var nodeParent = inInputNode.parentNode;
nodeParent.appendChild(document.createTextNode(the Text));
// All is fine to this point, but
// the following line causes Safari to crash...
nodeParent.removeChild(inInputNode);
}
</script>
Jul 23 '05 #2
On Sun, 28 Nov 2004 10:07:45 +0100, Joakim Braun
<jo**********@jfbraun.removethis.com> wrote:

[snip]
theEditText.setAttribute("type", "text");
theEditText.setAttribute("size", theText.length + 4);
theEditText.setAttribute("id", "dyntext");
theEditText.setAttribute("value", theText);
theEditText.<property> = <value>;

would be sufficient for all of those.
theEditText.setAttribute("onblur",
new Function("editTextToCell(this)"));
The setAttribute only takes string arguments; Microsoft just decided to
allow others on a whim. Continuing the previous changes will fix it.
theTextNode.parentNode.removeChild(theTextNode);
inNode.removeChild(theTextNode);
theTextNode.nodeValue="";
I don't think there's much point in doing that. Once the function returns,
there will be no references to the text node so it, and it's value, will
be destroyed.

[snip]
<form name="form1" >


If the form controls are just to edit values, why include a form?
Moreover, why name it (or preferably id-ing it) if you don't reference the
form via that?

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: ANC | last post by:
hi, i would like to ask how can i set a field of recordset to be editable? thanks in advance. ANC
0
by: Jim C Nguyen | last post by:
I have a table with ~2.2 million rows. Sometimes when I do an update to one single row it will instead update ALL of the rows using the same update. This happens every one in about 500,000...
17
by: black tractor | last post by:
HI there.. l was just wondering, if l place a "table" in the "editable region" of my template, will the text, graphics placed inside the this "table" MOVE BY ITSELF?? l mean, recently l had a...
7
by: deko | last post by:
SELECT tblTxAcct.TxAcctName, tblTxType.TxTypeName, Nz(qryTxAcctListCt.TxCount, 0) AS TxCt FROM (tblTxAcct INNER JOIN tblTxType ON tblTxAcct.TxType_ID=tblTxType.TxType_ID) LEFT JOIN qryTxAcctListCt...
6
by: Richard L Rosenheim | last post by:
I'm sure it can be done, I haven't been able to find the right article yet. I want to be able to filter the records that the datagrid displays, but still have an editable datagrid. That is, I...
3
by: S P Arif Sahari Wibowo | last post by:
Hi! I would like to make an editable continous form, where most fields will be from table A and editable, except 1-3 fields are a glimpse into table B and uneditable. Table A relate to table B...
1
by: Joe Spears | last post by:
Hi I want to display a datagrid summary of a datatable. The grid will not show all the fields, but when the user selects a row, I want the other controls (text boxes) to also bind to the same row...
1
by: planetthoughtful | last post by:
Hi All, I have a web page that presents records in a table, with one row per record. I'd like to put an edit button next to each record, such that if a user clicks on the edit button next to...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
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: 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)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
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
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
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.