How to alter text inside a table cell using Javascript

[Trevor L.]

BlankHello to all the wonderful experts out there.

This may not be strictly a FrontPage question, it is more an HTML/Javascript question,
but I don't know whether there is a more specialised Newsgroup for this type of query.

I have a table like this (there are many more entries)

<table>
<tr>
<td>
<a href="#1"
onclick="... (action) ...">
<img src="images/blank.gif" name="Thumbs1" alt=""><br>
Collage<br>
(mainly<br>
Kate's<br>
Family)
</a>
</td>

........
</tr>
</table>

I have written Javascript to alter the image displayed as follows

function PreLoadThumbs()
{ var ThumbnailsImg = new Array() ;
for (i = 0; i < Thumbnails.length; i++)
{ ThumbnailsImg = new Image() ;
ThumbnailsImg.src = Thumbnails ;
document.images["Thumbs" + (i + 1)].src = ThumbnailsImg.src; }

(where Thumbnails is a global text array of the thumbnail names
e.g.var Thumbnails = new Array("images/thumbnails/family-pictures.jpg" ,
... ) ;

I would like to be able to do exactly the same for the captions as for the images,
so I have set up an array of caption names
e.g var Captions = new Array("Collage<br>(mainly<br>Kate's<br>Family)" ,
...);

I can put the following code in place of the actual caption and it works
<script type="text/javascript">document.write(Captions[0])</script>

However, I would prefer to do it the same way as the images
i.e. refer to the HTML element and then assign the corresponding element of array Captions to that HTML
something like
document.text["Caption" + (i + 1)] = Captions; }

How do I refer to this element of the HTML?
I am sure I need something other than document.text
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Thomas A. Rowe]

I think J-Bots has a component that will allow you to associate text with a image on mouse over /
image swapping.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================


BlankHello to all the wonderful experts out there.

This may not be strictly a FrontPage question, it is more an HTML/Javascript question,
but I don't know whether there is a more specialised Newsgroup for this type of query.

I have a table like this (there are many more entries)

<table>
<tr>
<td>
<a href="#1"
onclick="... (action) ...">
<img src="images/blank.gif" name="Thumbs1" alt=""><br>
Collage<br>
(mainly<br>
Kate's<br>
Family)
</a>
</td>

........
</tr>
</table>

I have written Javascript to alter the image displayed as follows

function PreLoadThumbs()
{ var ThumbnailsImg = new Array() ;
for (i = 0; i < Thumbnails.length; i++)
{ ThumbnailsImg = new Image() ;
ThumbnailsImg.src = Thumbnails ;
document.images["Thumbs" + (i + 1)].src = ThumbnailsImg.src; }

(where Thumbnails is a global text array of the thumbnail names
e.g.var Thumbnails = new Array("images/thumbnails/family-pictures.jpg" ,
... ) ;

I would like to be able to do exactly the same for the captions as for the images,
so I have set up an array of caption names
e.g var Captions = new Array("Collage<br>(mainly<br>Kate's<br>Family)" ,
...);

I can put the following code in place of the actual caption and it works
<script type="text/javascript">document.write(Captions[0])</script>

However, I would prefer to do it the same way as the images
i.e. refer to the HTML element and then assign the corresponding element of array Captions to that
HTML
something like
document.text["Caption" + (i + 1)] = Captions; }

How do I refer to this element of the HTML?
I am sure I need something other than document.text
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Thomas,

Thank you (as always) for your prompt reply.

However, I don't want to associate text with a image on mouse over / image
swapping. I want the text to be there (underneath it) whenever the page is
presented.

I have this HTML
<td>
<a href="#1"
onclick="... (action) ...">
<img src="images/blank.gif" name="Thumbs1" alt=""><br>
GARBAGE TEXT
</a>
</td>

I want GARBAGE TEXT to be replaced by an element of the array Captions which
has been defined in Javascript. I have already done a similar task with the
element src="images/blank.gif" by this code (when i = 0)
document.images["Thumbs" + (i + 1)].src = ThumbnailsImg.src;

The line of code above is part of a function PreLoadThumbs() which is called
from the HTML by
<body onload = "PreLoadThumbs()">

So my question is what reference do I use in Javascript to change GARBAGE
TEXT?

Is it document.table["Table" + (i +1)].rows[0].cells[0].text" (where the
table tag has name="Table1" ,etc.)
Or what ?
--
Cheers,
Trevor L.





I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Thomas A. Rowe]

Trevor,

Sorry, I misunderstood what you were asking. I can't help you with JavaScript coding.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================

 

[Steve Easton]

BlankWhat you're looking for is:

document.all.elementname.innerHTML = "The text you want to write";

Where elementname = the id of the element: <td id="elementname"</td>

and "The text you want to write" = the text you want to appear. It can be a variable.

If you want to define a special font or font color it's done as shown below.

document.all.elementname.innerHTML = "<font color=blue>The text you want to write</font>";

hth


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

Hello to all the wonderful experts out there.

This may not be strictly a FrontPage question, it is more an HTML/Javascript question,
but I don't know whether there is a more specialised Newsgroup for this type of query.

I have a table like this (there are many more entries)

<table>
<tr>
<td>
<a href="#1"
onclick="... (action) ...">
<img src="images/blank.gif" name="Thumbs1" alt=""><br>
Collage<br>
(mainly<br>
Kate's<br>
Family)
</a>
</td>

........
</tr>
</table>

I have written Javascript to alter the image displayed as follows

function PreLoadThumbs()
{ var ThumbnailsImg = new Array() ;
for (i = 0; i < Thumbnails.length; i++)
{ ThumbnailsImg = new Image() ;
ThumbnailsImg.src = Thumbnails ;
document.images["Thumbs" + (i + 1)].src = ThumbnailsImg.src; }

(where Thumbnails is a global text array of the thumbnail names
e.g.var Thumbnails = new Array("images/thumbnails/family-pictures.jpg" ,
... ) ;

I would like to be able to do exactly the same for the captions as for the images,
so I have set up an array of caption names
e.g var Captions = new Array("Collage<br>(mainly<br>Kate's<br>Family)" ,
...);

I can put the following code in place of the actual caption and it works
<script type="text/javascript">document.write(Captions[0])</script>

However, I would prefer to do it the same way as the images
i.e. refer to the HTML element and then assign the corresponding element of array Captions to that
HTML
something like
document.text["Caption" + (i + 1)] = Captions; }

How do I refer to this element of the HTML?
I am sure I need something other than document.text
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Jon Spivey]

Hi Trevor,

You'd give the cell an ID then use script like this to set the text.
<script type="text/javascript">
function changeText(a,b){
if(!document.all && !document.getElementById)return;
var c = (document.all)?document.all(a): document.getElementById(a);
if(c)c.innerHTML=b;
}
</script>
<td id="something">this text will change</td>
<a href="javascript:;" onclick="changeText('something', 'some new text');
return false;">change text</a>

 

[Trevor L.]

Thomas,
Thanks for the reply.

Jon,
Thanks. The code you sent is getting closer to what I was looking for, but
it isn't quite there.

My code is
<table>
<tr>
<td id="Text1">
<a href="#1"
onclick="spawnJimcoPopup(.........)"
<img src="images/blank.gif" name="Thumbs1" alt=""><br>
THIS IS THE TEXT I WANT TO CHANGE
</a>
</td>
....

When I run the code you sent (modified to call it from <body onload="...">)
, everything within <td></td> was replaced, so I get the correct text, but
no image.

After a bit of experimentation I used this code
<table>
<tr>
<td>
<a href="#1"
onclick="spawnJimcoPopup(.........)"
<img src="images/blank.gif" name="Thumbs1" alt=""><br>
<span id="Text1">THIS IS THE TEXT I WANT TO CHANGE</span>
</a>
</td>
....

Hooray! It worked.

Does this mean that any tag element in HTML can be given an id and then that
id used in Javascript to refer to it.
It sure looks like it
--
Many Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Hi and thanks.

What I ending up using was

document.getElementById('Text' + (i + 1)).innerHTML= Captions;
where Captions is a text array

It works fine, so how does this differ from:
document.all.elementname.innerHTML = "The text you want to write"; ?

What does the ".all" add to the statement?

Thanks for the tip on changing font. Luckily I have a class definition in
force in this division, so the font I wanted was carried through.
--
Cheers,
Trevor L.




I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Jon Spivey]

document.all is an IE only method - it's not supported on any other browser.
See my other reply