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

[coolsti]

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.getEle mentById('label 1');
myceltext = mycel.childNode s.item(0);
currenttext = myceltext.data;
alert(currentte xt);

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

Thanks for any help!

steve

[Random]

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.getEle mentById('label 1');
myceltext = mycel.childNode s.item(0);
currenttext = myceltext.data;
alert(currentte xt);

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

Thanks for any help!

steve

mycel = document.getEle mentById('label 1');
while( mycel.childNode s.length )
mycel.removeChi ld( mycel.childNode s[c] );

mycel.appendChi ld(
document.create TextNode( 'new text!' )
);
Or, alternately (I don't recommend this):
document.getEle mentById('label 1').innerHTML =
'new text!';
Missing compatibility checks for brevity's sake, but works in the most
common modern browsers.

[coolsti]

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

steve

mycel = document.getEle mentById('label 1');
while( mycel.childNode s.length )
mycel.removeChi ld( mycel.childNode s[c] );

mycel.appendChi ld(
document.create TextNode( 'new text!' )
);
Or, alternately (I don't recommend this):
document.getEle mentById('label 1').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,s tr) {
// id is the ID of the td cell, str is new text
var mycel = document.getEle mentById(id);
var myceltext = mycel.childNode s.item(0);
mycel.removeChi ld(myceltext);
var newtxt = document.create TextNode(str);
mycel.appendChi ld(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

[Random]

coolsti wrote:

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

steve

mycel = document.getEle mentById('label 1');
while( mycel.childNode s.length )
mycel.removeChi ld( mycel.childNode s[c] );

mycel.appendChi ld(
document.create TextNode( 'new text!' )
);
Or, alternately (I don't recommend this):
document.getEle mentById('label 1').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,s tr) {
// id is the ID of the td cell, str is new text
var mycel = document.getEle mentById(id);
var myceltext = mycel.childNode s.item(0);
mycel.removeChi ld(myceltext);
var newtxt = document.create TextNode(str);
mycel.appendChi ld(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.

[RobB]

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.getEle mentById('label 1');
myceltext = mycel.childNode s.item(0);
currenttext = myceltext.data;
alert(currentte xt);

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.getEl ementById
&& (el = document.getEle mentById(sId)))
{
while (el.hasChildNod es())
el.removeChild( el.lastChild);
el.appendChild( document.create TextNode(sText) );
}
}

[coolsti]

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.getEle mentById('label 1'); myceltext =
mycel.childNode s.item(0); currenttext = myceltext.data;
alert(currentte xt);

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.getEl ementById
&& (el = document.getEle mentById(sId))) {
while (el.hasChildNod es())
el.removeChild( el.lastChild);
el.appendChild( document.create TextNode(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.getEle mentById
exists).

-steve