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>