Editable table blues

Discussion in 'Javascript' started by Joakim Braun, Nov 28, 2004.

  1. Joakim Braun

    Joakim Braun Guest

    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>
     
    Joakim Braun, Nov 28, 2004
    #1
    1. Advertising

  2. Joakim Braun

    Fred Oz Guest

    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(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>
     
    Fred Oz, Nov 28, 2004
    #2
    1. Advertising

  3. On Sun, 28 Nov 2004 10:07:45 +0100, Joakim Braun
    <> 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.
     
    Michael Winter, Nov 28, 2004
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dietrich
    Replies:
    1
    Views:
    650
    Joe Smith
    Jul 22, 2004
  2. Max
    Replies:
    0
    Views:
    460
  3. Akshay Kumar

    session state blues

    Akshay Kumar, Apr 1, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    314
    Akshay Kumar
    Apr 1, 2004
  4. Alap Ghosh

    Redirect Blues - Urgent Help needed

    Alap Ghosh, Jun 10, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    319
    Alap Ghosh
    Jun 10, 2004
  5. =?Utf-8?B?dHJ1ZmF1eA==?=

    Web part blues

    =?Utf-8?B?dHJ1ZmF1eA==?=, Nov 22, 2005, in forum: ASP .Net
    Replies:
    8
    Views:
    1,908
    Juan T. Llibre
    Nov 23, 2005
Loading...

Share This Page