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

 

[Random]

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.

 

[coolsti]

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

 

[Random]

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.

 

[RobB]

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));
}
}

 

[coolsti]

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