Editable table blues

J

Joakim Braun

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(theText));
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>
 
F

Fred Oz

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?
Click to expand...

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)
Click to expand...

Yes, don't assume that the firstChild will be what you expect it to be,
but given that...

[...]
theEditText.setAttribute("type", "text");
Click to expand...

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);
Click to expand...

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)"));
Click to expand...

attach the function thusly:

theEditText.onblur = editTextToCell;

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

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

// 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(theText));
// All is fine to this point, but
// the following line causes Safari to crash...
nodeParent.removeChild(inInputNode);
}
</script>
 
M

Michael Winter

On Sun, 28 Nov 2004 10:07:45 +0100, Joakim Braun

[snip]
theEditText.setAttribute("type", "text");
theEditText.setAttribute("size", theText.length + 4);
theEditText.setAttribute("id", "dyntext");
theEditText.setAttribute("value", theText);
Click to expand...

theEditText.<property> = <value>;

would be sufficient for all of those.
theEditText.setAttribute("onblur",
new Function("editTextToCell(this)"));
Click to expand...

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="";
Click to expand...

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" >
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
Javascript DOM 1
Only one table shows up with the information 2
Script to send email not working 1
Help needed with thank you message 5
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Getting extra blank rows from appending HTML..? 2

Members online

No members online now.
Total: 23 (members: 0, guests: 23)
Robots: 339

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,062
Latest member
OrderKetozenseACV

Latest Threads

Top