How to dynamically change text in a table's TD cell?

Discussion in 'Javascript' started by coolsti, Jun 1, 2005.

  1. coolsti

    coolsti Guest

    Can someone tell me how to do this if it is possible?

    I have a table based web site, and I would like to dynamically change the
    text that is shown in a particular cell of a table. I give the cell the
    unique ID label1 so I can get a hold of it, and I can get a javascript to
    display the data in an alert box (this is just to see if I can access the
    text) with:

    mycel = document.getElementById('label1');
    myceltext = mycel.childNodes.item(0);
    currenttext =;

    But how do I exchange the text in this cell for something else?

    Thanks for any help!

    coolsti, Jun 1, 2005
    1. Advertisements

  2. coolsti

    Random Guest

    mycel = document.getElementById('label1');
    while( mycel.childNodes.length )
    mycel.removeChild( mycel.childNodes[c] );

    document.createTextNode( 'new text!' )

    Or, alternately (I don't recommend this):
    document.getElementById('label1').innerHTML =
    'new text!';

    Missing compatibility checks for brevity's sake, but works in the most
    common modern browsers.
    Random, Jun 1, 2005
    1. Advertisements

  3. coolsti

    coolsti Guest

    Hi and thanks!

    Your first suggestion is what I in the meantime came up with, and it
    works. I thought that it would be possible to directly exchange the text
    (perhaps your second alternative is the way to do this) but it works fine
    by removing the node and then creating a new one.

    I'm using this function:

    function changeText(id,str) {
    // id is the ID of the td cell, str is new text
    var mycel = document.getElementById(id);
    var myceltext = mycel.childNodes.item(0);
    var newtxt = document.createTextNode(str);

    The main difference here is that I am directly getting the text node and
    then removing it only, while your suggestion is removing all nodes in a
    loop. But this is probably the same thing in this case? Mine works, anyway.

    Thanks again!

    coolsti, Jun 1, 2005
  4. coolsti

    Random Guest

    The reason for the loop is the differing interpretation of whitespace
    between Internet Explorer and Mozilla. Internet Explorer does not
    (usually) create a TextNode from white space between HTML tags, while
    Mozilla does.

    For example:
    <td id=foo>

    In this example, IE will say foo has one childNode and Mozilla will say
    it has three.

    For another example:
    <td id=foo><b>bar</b></td>

    Both browsers will interpret this example identically.

    For the record, replacing the innerHTML is identical to removing the
    node and then creating a new one, except that the browser has to parse
    the new innerHTML and do its own node-building.

    I don't think you'll have a problem with either method, except that
    older browsers may not understand your attempts to do the node-building
    for them.
    Random, Jun 1, 2005
  5. coolsti

    RobB Guest

    function replaceText(sId, sText)
    var el;
    if (document.getElementById
    && (el = document.getElementById(sId)))
    while (el.hasChildNodes())
    RobB, Jun 1, 2005
  6. coolsti

    coolsti Guest

    Hi and thanks! A better idea than what I came up with (using a while loop
    to remove all child nodes and a check to see if document.getElementById

    coolsti, Jun 2, 2005
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.