View Full Version : Treating A Cell Kinda Like A Frame

02-27-2003, 07:21 AM
I've been told this is possible, but I don't know where to begin... I have a table with a lot of text, which can't fit on the page. So I want to treat that cell like a frame and be able to click a link which will change the contents of that cell (it's all text, no pics) and it'd work like that. So, am I wrong or can this actually be done?

I am EXTREMELY new at Javascript, so if, out of the goodness of your hearts, someone could help me write the script, that would be very much appreciated.

02-27-2003, 08:57 AM
put around text
<div style="width:100;height:100;overflow:auto">


02-27-2003, 09:03 AM
you can use innerHTML or DOM.

here's an example of using innerHTML:

<script language="javascript">
function changeText(id,txt){
var obj = (document.getElementById) ? document.getElementById(id):(document.all)?document.all[id]:null;
if (obj) obj.innerHTML = txt;
<table border="1">
<td id="td1">This is td1</td><td><input type="button" value="Change"

onclick="changeText('td1','td1 text changed!')"></td>
<td id="td2">This is td2</td><td><input type="button" value="Change"

onclick="changeText('td2','td2 text changed!')"></td>

02-27-2003, 09:19 AM
There's a property in JS newer versions, that is called "innerHTML".

This property is a string and is readable-writable - if I may say so.

In your case, just ad the ID attribute to your <TD> tag and access it using


To assign new content there, just use the "=" operator:

document.getElementById("the_Id_of_your_<TD>_tag").innerHTML=" new html content "

some example:

<HTML><HEAD ... bla bla bla - html goes there.
<SCRIPT LANGUAGE=javascript>

function change(text)

document.getElementById('MYCELL').innerHTML = text



<TD ID = MYCELL >This is my <B>first content</B></TD>

<A HREF="javascript: change('And this is my <B>second</B> text!')">click here to change</A>


I didn't test it, but normaly it should work - if it doesn't it has to be for some silly syntax misspelling :p


03-30-2004, 05:10 AM
I'm having a problem with innerHTML. I'm trying to add links to a cell of a table? Is this even possible, if so how? The innerHTML function I created works great but just with adding plain text...


03-30-2004, 05:47 AM
As the property name implies, you can set html tags not just plain text.

document.getElementById("theId").innerHTML='<a href="page.htm">Link</a>'

03-30-2004, 06:24 AM
document.getElementById("theId").innerHTML='<a href="page.htm">Link</a>'

Hrm, I don't understand why that works if i place that into a function. but this code wont work:


function leftnav(toptitle, linklist) {
document.getElementById('cell-title').innerHTML+="<img src=\""+toptitle+"\">";


<area shape="rect" coords="510,125,591,136" href="#" onClick="leftnav('images/accessories-title.jpg', '<a href="\test.htm\">Link I-I</a>Link I-II<br>Link I-III');return false;">

Could you help me with the syntax I used? Help me to understand why it doesn't work and help me fix the problem? It's printing the text on the page itself which shouldn't be happening.


03-30-2004, 07:23 AM
nvm i figured it out. i just set the stuff into a variable :-)


03-30-2004, 07:26 AM
scratch that, it doesn't work :-(. This is driving me nuts not figureing it out

03-30-2004, 09:24 AM