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

"Reply Via Newsgroup" <re************ *****@shaw.ca> wrote in message
news:76AUb.4096 81$ts4.206091@p d7tw3no...

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.javas cript:

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><t d id="cell43">
Original text
</td></tr></table>

<button
onclick="docume nt.getElementBy Id('cell43').in nerHTML=
'New words'">
Change cell 43</button>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Lasse Reichstein Nielsen]

"Reply Via Newsgroup" <re************ *****@shaw.ca> writes:

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.getEle mentById("table Id");
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(e lem,content) {
// clear old content
while (elem.hasChildN odes()) {
elem.removeChil d(elem.lastChil d);
}
// insert new content
if (typeof content == "string") {
elem.appendChil d(document.crea teTextNode(cont ent));
} // 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(for m) {
var x = Number(form.ele ments["x"].value);
var y = Number(form.ele ments["y"].value);
var text = form.elements["text"].value;
changeContent(g etCell(y,x),tex t);
}

</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="updat eTable(this);re turn 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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[DU]

Evertjan. wrote:

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

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><t d id="cell43">
Original text
</td></tr></table>

<button
onclick="docume nt.getElementBy Id('cell43').in nerHTML=
'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/doctorunc...NodeValue.html

<button type="button" onclick="if(doc ument.getElemen tById &&
document.getEle mentById('cell4 3').childNodes[0].nodeType == 3)
{document.getEl ementById('cell 43').childNodes[0].nodeValue = 'New
words';};">Chan ge 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="docume nt.getElementBy Id('cell43').in nerHTML=

Your:
<button type="button" onclick="if(doc ument.getElemen tById &&
document.getEle mentById('cell4 3').childNodes[0].nodeType == 3)
{document.getEl ementById('cell 43').childNodes[0].nodeValue = 'New
words';};">Chan ge cell 43</button>

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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[DU]

Evertjan. wrote:

Mine:
onclick="docume nt.getElementBy Id('cell43').in nerHTML=

Your:
<button type="button" onclick="if(doc ument.getElemen tById &&
document.getEle mentById('cell4 3').childNodes[0].nodeType == 3)
{document.getEl ementById('cell 43').childNodes[0].nodeValue = 'New
words';};">Chan ge cell 43</button>

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.javas cript 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.rep laceData(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
As I new beforehand someone would add to my minimalistic approch,
I was not overly concerned with DM2 compatibility.

[Evertjan.]

DU wrote on 06 feb 2004 in comp.lang.javas cript:

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.

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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[DU]

Evertjan. wrote:

DU wrote on 06 feb 2004 in comp.lang.javas cript:

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.

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

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:is******** **@hotpop.com.. .

"Reply Via Newsgroup" <re************ *****@shaw.ca> writes:

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.getEle mentById("table Id");
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(e lem,content) {
// clear old content
while (elem.hasChildN odes()) {
elem.removeChil d(elem.lastChil d);
}
// insert new content
if (typeof content == "string") {
elem.appendChil d(document.crea teTextNode(cont ent));
} // 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(for m) {
var x = Number(form.ele ments["x"].value);
var y = Number(form.ele ments["y"].value);
var text = form.elements["text"].value;
changeContent(g etCell(y,x),tex t);
}

</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="updat eTable(this);re turn 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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors:

<URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html> '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.appendChil d(document.crea teTextNode(cont ent));

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