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 = myceltext.data;
    alert(currenttext);

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

    Thanks for any help!

    steve
    coolsti, Jun 1, 2005
    #1
    1. Advertising

  2. coolsti

    Random Guest

    coolsti wrote:
    > 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 = myceltext.data;
    > alert(currenttext);
    >
    > But how do I exchange the text in this cell for something else?
    >
    > Thanks for any help!
    >
    > steve


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

    mycel.appendChild(
    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
    #2
    1. Advertising

  3. coolsti

    coolsti Guest

    On Wed, 01 Jun 2005 01:18:50 -0700, Random wrote:

    >> steve

    >
    > mycel = document.getElementById('label1');
    > while( mycel.childNodes.length )
    > mycel.removeChild( mycel.childNodes[c] );
    >
    > mycel.appendChild(
    > 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.


    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);
    mycel.removeChild(myceltext);
    var newtxt = document.createTextNode(str);
    mycel.appendChild(newtxt);
    }

    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!

    steve
    coolsti, Jun 1, 2005
    #3
  4. coolsti

    Random Guest

    coolsti wrote:
    > On Wed, 01 Jun 2005 01:18:50 -0700, Random wrote:
    >
    > >> steve

    > >
    > > mycel = document.getElementById('label1');
    > > while( mycel.childNodes.length )
    > > mycel.removeChild( mycel.childNodes[c] );
    > >
    > > mycel.appendChild(
    > > 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.

    >
    > 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);
    > mycel.removeChild(myceltext);
    > var newtxt = document.createTextNode(str);
    > mycel.appendChild(newtxt);
    > }
    >
    > 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!
    >
    > steve



    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>
    <b>bar</b>
    </td>

    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
    #4
  5. coolsti

    RobB Guest

    coolsti wrote:
    > 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 = myceltext.data;
    > alert(currenttext);
    >
    > But how do I exchange the text in this cell for something else?
    >
    > Thanks for any help!
    >
    > steve


    function replaceText(sId, sText)
    {
    var el;
    if (document.getElementById
    && (el = document.getElementById(sId)))
    {
    while (el.hasChildNodes())
    el.removeChild(el.lastChild);
    el.appendChild(document.createTextNode(sText));
    }
    }
    RobB, Jun 1, 2005
    #5
  6. coolsti

    coolsti Guest

    On Wed, 01 Jun 2005 08:29:06 -0700, RobB wrote:

    > coolsti wrote:
    >> 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 = myceltext.data;
    >> alert(currenttext);
    >>
    >> But how do I exchange the text in this cell for something else?
    >>
    >> Thanks for any help!
    >>
    >> steve

    >
    > function replaceText(sId, sText)
    > {
    > var el;
    > if (document.getElementById
    > && (el = document.getElementById(sId))) {
    > while (el.hasChildNodes())
    > el.removeChild(el.lastChild);
    > el.appendChild(document.createTextNode(sText));
    > }
    > }


    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
    exists).

    -steve
    coolsti, Jun 2, 2005
    #6
    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. news.rcn.com
    Replies:
    1
    Views:
    9,631
    Chris Smith
    Jul 12, 2004
  2. Phillip Roncoroni
    Replies:
    14
    Views:
    1,074
    Toby A Inkster
    Apr 5, 2004
  3. sdf
    Replies:
    3
    Views:
    1,881
  4. kj
    Replies:
    5
    Views:
    121
    McKirahan
    Feb 12, 2004
  5. harry

    Change table cell text alignment?

    harry, Jan 19, 2005, in forum: Javascript
    Replies:
    3
    Views:
    158
    Spats30
    Jan 21, 2005
Loading...

Share This Page