How can I change displayed text?

[Reply Via Newsgroup]

Folks,

Say I have a table, ten columns, ten rows - Each with a word in it. I want
to change the values of some/all of the cells in the table via a hyperlink.
How do I reference each cell and change its text contents from a link
elsewhere in the page? I have a rought idea that I'll need something like
'id' in my <td> tags but while I have a greater understanding of server-side
programming langauges like PHP, javascript is still very new to me.

Can someone help? I am learning more and more about document properties so
if someone could provide me with a quick example (with some remark
statements) it should give me enough to play with and educate myself (as
opposed to providing the full answer and I learn little).

All help, via the newsgroup, is much appreciated, thanks,
randelld

 

[Randell D.]

Folks,

Say I have a table, ten columns, ten rows - Each with a word in it. I want
to change the values of some/all of the cells in the table via a hyperlink.
How do I reference each cell and change its text contents from a link
elsewhere in the page? I have a rought idea that I'll need something like
'id' in my <td> tags but while I have a greater understanding of server-side
programming langauges like PHP, javascript is still very new to me.

Can someone help? I am learning more and more about document properties so
if someone could provide me with a quick example (with some remark
statements) it should give me enough to play with and educate myself (as
opposed to providing the full answer and I learn little).

All help, via the newsgroup, is much appreciated, thanks,
randelld

I'm afraid in case my original question might not have been clear enough -
thus... if someone could supply me with a simple example of text in a table
cell... and a seperate link that when clicked, will change the text (not the
image) held in the table cell...

again, all help, via newsgroup is much apprecaited
randelld

 

[Evertjan.]

Randell D. wrote on 06 feb 2004 in comp.lang.javascript:

I'm afraid in case my original question might not have been clear
enough - thus... if someone could supply me with a simple example of
text in a table cell... and a seperate link that when clicked, will
change the text (not the image) held in the table cell...

<table><tr><td id="cell43">
Original text
</td></tr></table>

<button
onclick="document.getElementById('cell43').innerHTML=
'New words'">
Change cell 43</button>

 

[Lasse Reichstein Nielsen]

Say I have a table, ten columns, ten rows - Each with a word in it. I want
to change the values of some/all of the cells in the table via a hyperlink.
How do I reference each cell and change its text contents from a link
elsewhere in the page?

Give the table an id. Then use, e.g.,

function getCell(row,col) {
var table = document.getElementById("tableId");
var rowElem = table.rows[row];
var cellElem = rowElem.cells[col];
return cellElem;
}

That should return a reference to the cell (td element) at the desired
coordinates. For practical use, some error checking should be added.

Changing the content is harder. Fewer browsers allow changing the content
than allow finding the cell, but let's again use W3C DOM methods:

function changeContent(elem,content) {
// clear old content
while (elem.hasChildNodes()) {
elem.removeChild(elem.lastChild);
}
// insert new content
if (typeof content == "string") {
elem.appendChild(document.createTextNode(content));
} // else ... e.g., add DOM nodes directly
}

Again some error checking should be added, and fallbacks for old and
non-compliant browsers (like older IEs which could use innerText/innerHTML
to change the content).

Can someone help? I am learning more and more about document properties so
if someone could provide me with a quick example (with some remark
statements)

I hope the code is readable enough with the comments.

it should give me enough to play with and educate myself (as
opposed to providing the full answer and I learn little).

Example:
---
<script type="text/javascript">

// insert the two functions from above

function updateTable(form) {
var x = Number(form.elements["x"].value);
var y = Number(form.elements["y"].value);
var text = form.elements["text"].value;
changeContent(getCell(y,x),text);
}

</script>
<table id="tableId">
<tr><td>0,0</td><td>1,0</td><td>2,0</td><td>3,0</td><td>4,0</td></tr>
<tr><td>0,1</td><td>1,1</td><td>2,1</td><td>3,1</td><td>4,1</td></tr>
<tr><td>0,2</td><td>1,2</td><td>2,2</td><td>3,2</td><td>4,2</td></tr>
<tr><td>0,3</td><td>1,3</td><td>2,3</td><td>3,3</td><td>4,3</td></tr>
<tr><td>0,4</td><td>1,4</td><td>2,4</td><td>3,4</td><td>4,4</td></tr>
</table>

<form action="" onsubmit="updateTable(this);return false;">
X:<input name="x" value="0"> Y:<input name="y" value="0"><br>
Text:<input name="text" value="some text"><br>
<input type="submit" value="update">
</form>

 

[DU]

Randell D. wrote on 06 feb 2004 in comp.lang.javascript:




<table><tr><td id="cell43">
Original text
</td></tr></table>

<button
onclick="document.getElementById('cell43').innerHTML=
'New words'">
Change cell 43</button>

Why resort to innerHTML here? Why not resort entirely to DOM 2
CharacterData attributes or methods? It's faster and standards compliant
too.
Speed would be a more important factor to consider here than usual
because of the number of cells.

innerHTML versus nodeValue performance comparison:
http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/innerHTMLvsNodeValue.html

<button type="button" onclick="if(document.getElementById &&
document.getElementById('cell43').childNodes[0].nodeType == 3)
{document.getElementById('cell43').childNodes[0].nodeValue = 'New
words';};">Change cell 43</button>

type="button" is also needed, otherwise HTML 4.01 compliant browsers
will try to submit the form.

It would be better to parametrize all this in a function.

DU

 

[Evertjan.]

Mine:
onclick="document.getElementById('cell43').innerHTML=

Your:
<button type="button" onclick="if(document.getElementById &&
document.getElementById('cell43').childNodes[0].nodeType == 3)
{document.getElementById('cell43').childNodes[0].nodeValue = 'New

Why resort to innerHTML here? Why not resort entirely to DOM 2

Because I think a newbee will be desillusioned by your method.

Giving an minimalist example to a newbee is not primarily for him to use
but for education. I doubt a newbee will understand your method, so let him
experiment with mine.

As I new beforehand someone would add to my minimalistic approch,
I was not overly concerned with DM2 compatibility.

 

[DU]

Mine:
onclick="document.getElementById('cell43').innerHTML=

Your:
<button type="button" onclick="if(document.getElementById &&
document.getElementById('cell43').childNodes[0].nodeType == 3)
{document.getElementById('cell43').childNodes[0].nodeValue = 'New

Why resort to innerHTML here? Why not resort entirely to DOM 2

Because I think a newbee will be desillusioned by your method.

My method is web standards compliant (yours is not) and it is faster
(yours is not). I just want to underline this here.
There is definitively a need to have the comp.lang.javascript FAQ
updated to show that text nodes can be changed in another way than
innerHTML. The fact that each and all CharacterData attributes and
methods are perfectly supported 100% by recent browsers (MSIE 6, Safari
1.x, Mozilla-based browsers, NS 7.x, M-meleon 0.8+, Opera 7.x, etc..)
should promote their usage when appropriate. If you can not use them in
a post, then there is a problem somewhere.

RefTextNode.replaceData(15,9,"New words") was also another way (better
than innerHTML and better than removing text nodes and creating them
again with new values) since he clearly referred to a single word in
cells and to text content in his post; nevertheless he should have
provided an url too.

Giving an minimalist example to a newbee is not primarily for him to use
but for education. I doubt a newbee will understand your method, so let him
experiment with mine.

What you say is contradictory. You give him an example claiming that it
is not for use but for education. The end result is that there is
nothing to learn (nor to experiment) from your example/post which uses
innerHTML; there is nothing else to do than to just use it.
I believe you'll agree with me that there should be some [tutorial-like]
resources out there for explaining all this; the current FAQ certainly
could be improved.

What is a content tree?
http://www.mozilla.org/docs/dom/technote/intro/

The Document Object Model (DOM), Part I
http://webreference.com/js/column40/index.html
http://webreference.com/js/column40/properties.html

DU

 

[Evertjan.]

DU wrote on 06 feb 2004 in comp.lang.javascript:

My method is web standards compliant (yours is not) and it is faster
(yours is not). I just want to underline this here.

I agree.

My method is outdated, yours is not.

My method needs no explanation, yours does.

So with explanation, your post would be the better one.

But why is the faster important?
The browser machine is probably idling 98% anyway.

 

[DU]

DU wrote on 06 feb 2004 in comp.lang.javascript:



I agree.

My method is outdated, yours is not.

My method needs no explanation, yours does.

So with explanation, your post would be the better one.

But why is the faster important?
The browser machine is probably idling 98% anyway.

Speed is not *that* important, unless you have huge amount(s) of text to
change, update, whatever... For a few words, there is no
significant/meaningful gain of performance. For more than 5Kb (of text)
or so, then there is a gain for under 1Ghz machines. The performance
gain is proportional to size of text and reverse proportional to speed
of cpu.

regards,

DU

 

[Randell D.]

Say I have a table, ten columns, ten rows - Each with a word in it. I want
to change the values of some/all of the cells in the table via a hyperlink.
How do I reference each cell and change its text contents from a link
elsewhere in the page?

Give the table an id. Then use, e.g.,

function getCell(row,col) {
var table = document.getElementById("tableId");
var rowElem = table.rows[row];
var cellElem = rowElem.cells[col];
return cellElem;
}

That should return a reference to the cell (td element) at the desired
coordinates. For practical use, some error checking should be added.

Changing the content is harder. Fewer browsers allow changing the content
than allow finding the cell, but let's again use W3C DOM methods:

function changeContent(elem,content) {
// clear old content
while (elem.hasChildNodes()) {
elem.removeChild(elem.lastChild);
}
// insert new content
if (typeof content == "string") {
elem.appendChild(document.createTextNode(content));
} // else ... e.g., add DOM nodes directly
}

Again some error checking should be added, and fallbacks for old and
non-compliant browsers (like older IEs which could use innerText/innerHTML
to change the content).

Can someone help? I am learning more and more about document properties so
if someone could provide me with a quick example (with some remark
statements)

I hope the code is readable enough with the comments.

it should give me enough to play with and educate myself (as
opposed to providing the full answer and I learn little).

Example:
---
<script type="text/javascript">

// insert the two functions from above

function updateTable(form) {
var x = Number(form.elements["x"].value);
var y = Number(form.elements["y"].value);
var text = form.elements["text"].value;
changeContent(getCell(y,x),text);
}

</script>
<table id="tableId">
<tr><td>0,0</td><td>1,0</td><td>2,0</td><td>3,0</td><td>4,0</td></tr>
<tr><td>0,1</td><td>1,1</td><td>2,1</td><td>3,1</td><td>4,1</td></tr>
<tr><td>0,2</td><td>1,2</td><td>2,2</td><td>3,2</td><td>4,2</td></tr>
<tr><td>0,3</td><td>1,3</td><td>2,3</td><td>3,3</td><td>4,3</td></tr>
<tr><td>0,4</td><td>1,4</td><td>2,4</td><td>3,4</td><td>4,4</td></tr>
</table>

<form action="" onsubmit="updateTable(this);return false;">
X:<input name="x" value="0"> Y:<input name="y" value="0"><br>
Text:<input name="text" value="some text"><br>
<input type="submit" value="update">
</form>
---
Tested in IE 6 and Opera 7.

Good luck
/L

'Faith without judgement merely degrades the spirit divine.'

I love this solution... I can understand most/all of it, though its created
another problem for me... The text that I wanted to write into other cells
would be hyperlinks... I tried to have your solution update the cell's with
HTML code, it it converted the < and > characters...

I believe its going to mean a small change to

elem.appendChild(document.createTextNode(content));

The 'createTextNode' stands out at me, however, dispite having the Core
Javascript Reference and Guide 1.5 PDF files downloaded from Netscape, I
can't find any reference to it, or commands/properties like it.

This is one of my greatest gripes on javascript - I know there are different
variations/implementations of Javascript, but I see so many folk use what I
call functions (like createTextNode) that are undocumented... It makes me
wonder where you get to hear about them in the first place.

Can you help me further with either? (ie how to insert real html code in to
my table cell and/or how to find out all the different
"values/options/functions" that one can use/append to document. I have a
reasonably good background in programming but not having a complete
reference is slowing my education down big time).

Many thanks,
randelld

 

[Randell D.]

Speed is not *that* important, unless you have huge amount(s) of text to
change, update, whatever... For a few words, there is no
significant/meaningful gain of performance. For more than 5Kb (of text)
or so, then there is a gain for under 1Ghz machines. The performance
gain is proportional to size of text and reverse proportional to speed
of cpu.

regards,

DU

Gentle People,

Thanks for your input... I'm using a mixture of code from everyone to
achieve what I want to do... I'm actually working on an intranet application
and I am targetting it towards Mozilla. My testing so far is working out
healthy but as I have found out this morning, being able to replace text in
a cell (of a table) is one thing, but being able to replace a cell with an
HTML hyperlink is another... but I'll take it one step at a time.

Thanks to you all for the help...
randell d.

 

[Randell D.]

But why is the faster important?

The browser machine is probably idling 98% anyway.

I never made it clear as I didn't realise there would be big performance
differences, however I am working on an Intranet Application and speed will
(to a certain extent) be important... The text in each cell will be small
(30chars max), but there will be as many as 100 cells or so... and there
could be the time that I need half of those cells change from a single link
(which I am pretty sure I can manage from the code that every one has
suggested so far)... I'll continue to test and test and test on Mozilla (my
target browser for the app)... but I thought I'd drop a byte to thank you
guys - you've all given me enough to go on.

Cheers
Randell D.

 

[Lasse Reichstein Nielsen]

I love this solution... I can understand most/all of it, though its created
another problem for me... The text that I wanted to write into other cells
would be hyperlinks... I tried to have your solution update the cell's with
HTML code, it it converted the < and > characters...

Yes, as expected.

I believe its going to mean a small change to

The 'createTextNode' stands out at me, however, dispite having the Core
Javascript Reference and Guide 1.5 PDF files downloaded from Netscape, I
can't find any reference to it, or commands/properties like it.

It is W3C DOM code. The authoritative reference would be:
<URL:http://www.w3.org/TR/DOM-Level-2-Core/> (DOM 2)
or

This is one of my greatest gripes on javascript - I know there are different
variations/implementations of Javascript, but I see so many folk use what I
call functions (like createTextNode) that are undocumented... It makes me
wonder where you get to hear about them in the first place.

Hmm. Can't say where I heard it first.

Can you help me further with either? (ie how to insert real html code in to
my table cell and/or how to find out all the different
"values/options/functions" that one can use/append to document. I have a
reasonably good background in programming but not having a complete
reference is slowing my education down big time).

If we stick to DOM code, I would extend the "// else" part of the code to:
---
function changeContent(elem,content) {
// clear old content
while (elem.hasChildNodes()) {
elem.removeChild(elem.lastChild);
}
// insert new content
if (typeof content == "string") {
elem.appendChild(document.createTextNode(content));
} else { // assume DOM node
elem.appendChild(content);
}
}
---
We then need a way to construct the content nodes:

To create a link, you do, e.g.,:
---
var link = document.createElement("a"); // HTML A(nchor) element
link.href = "http://www.example.com";
link.appendChild(document.createTextNode("Link Content Text"));
---
You can then insert it into the document as:
---
changeContent(getCell(2,2),link);
---

As an example, change the last line of the updateTabel function to:
---
var link = document.createElement("a");
link.href = "http://www.example.com";
link.appendChild(document.createTextNode(text));
changeContent(getCell(y,x),link);
---

You can build arbitrary HTML structures like this, by creating elements,
giving them attributes, and adding children to them (either new elements
or text nodes).

Good luck.
/L

 

[Randell D.]

Yes, as expected.


It is W3C DOM code. The authoritative reference would be:
<URL:http://www.w3.org/TR/DOM-Level-2-Core/> (DOM 2)
or


Hmm. Can't say where I heard it first.


If we stick to DOM code, I would extend the "// else" part of the code to:
---
function changeContent(elem,content) {
// clear old content
while (elem.hasChildNodes()) {
elem.removeChild(elem.lastChild);
}
// insert new content
if (typeof content == "string") {
elem.appendChild(document.createTextNode(content));
} else { // assume DOM node
elem.appendChild(content);
}
}
---
We then need a way to construct the content nodes:

To create a link, you do, e.g.,:
---
var link = document.createElement("a"); // HTML A(nchor) element
link.href = "http://www.example.com";
link.appendChild(document.createTextNode("Link Content Text"));
---
You can then insert it into the document as:
---
changeContent(getCell(2,2),link);
---

As an example, change the last line of the updateTabel function to:
---
var link = document.createElement("a");
link.href = "http://www.example.com";
link.appendChild(document.createTextNode(text));
changeContent(getCell(y,x),link);
---

You can build arbitrary HTML structures like this, by creating elements,
giving them attributes, and adding children to them (either new elements
or text nodes).

Good luck.
/L

'Faith without judgement merely degrades the spirit divine.'

Many many thanks... In fact, if memory serves me correct, I think you've
answered one of my posts a couple of months ago as your name reminded me of
someone I knew who worked at HP Denmark...

Anyway... Thanks - you've helped me out alot... and I'll be reading into the
DOM...

Cheers
Randell D.

 

[Richard Cornford]

There is definitively a need to have the comp.lang.javascript
FAQ updated to show that text nodes can be changed in another
way than innerHTML. ...

I believe you'll agree with me that there should be some
[tutorial-like] resources out there for explaining all this;
the current FAQ certainly could be improved.

<snip>

It would be nice if quick answer 4.15 in the FAQ could include W3C DOM
Core methods of modifying "the current page". But the quick answers
section of the FAQ doesn't lend itself to providing the depth of
explanation and examples that would be needed to suitably explain the
use of those methods, certainly for anything more elaborate than
changing the contents of a single text Node.

If size constraints force the FAQ to only demonstrate one method then it
probably should be the simple, general method that does not require the
programmer to think about the Element/Node structure being created, and
works in the largest number of browsers (but these days the difference
between innerHTML and W3C DOM support is only significant for some now
elderly browsers that probably will not be with us much longer).

Not that I think that is a good thing as such because a quick simple
answer that seems to work (at least as well as anything works) serves to
mask the issues. Particularly the design issues around inserting content
with scripts and how the resulting page is going to be
meaningful/functional when it comes to cleanly degrading.

There is a pressure to expand the detail in the FAQ in many areas, and
it is irreconcilable with the need to keep the FAQ small enough to be
sensibly posted to the group. My proposed compromise to resolve these
pressures is to stress the FAQ's role as a source of links to more
detailed resources and where necessary provide those resources in the
form of notes on the FAQ. The notes that I have written (a couple of
which are currently unfinished) are at:-

<URL: http://www.litotes.domon.co.uk/js_info/faq_notes/faq_notes.html >

- though they will be moving to a permanent home on the jibbering.com
server prior to the publication of the next revision of the FAQ.

In principal I have nothing against writing a tutorial-like explanation
of content modification using the W3C DOM methods and placing it with
(even above) the existing notes on 4.15. In practice I am very near to
being able to finish the next revision of the FAQ proper and time spent
on adding a decent page on the W3C DOM methods now would significantly
delay that task (especially if it also went into the XHTML variants).
That makes me reluctant to give writing such a resource priority at this
time.

OTOH there is no good reason why anybody wanting to author a page of
notes for the FAQ on some subject within their expertise and dear to
their hart could not do so (even just providing content; text and
example code, and leaving me to do the mark-up).

Richard.