Referencing a Table Cell in JavaScript

[mtorbin]

Hey Gang,

I am searching with no success to try to find information on how to reference a table cell via JavaScript. I know it can be done, I just haven't been able to find it.

I want to write a function that writes to a particular table cell:

var tableCell = [REFERENCE TO TABLE CELL].value;

tableCell = document.write("Cool this works!"

Any suggestions?

- MT

 

[jdaniels]

I don't believe it can be done. Tables are part of an earlier HTML specification that was purely markup (ie display) and had no way of referencing arbitrary blocks of text. This is where DHTML is so useful - you can use DIV and SPAN to encapsulate a block of text, and write HTML to these blocks by referencing them in the way you're talking about.

Jon

 

[mtorbin]

You know I was thinking that, but I didn't give it much thought. I'll try that. How do I reference the div? By the name attribute that I give it?

 

[mtorbin]

Well, this is what I have so far:

<script language=&quot;JavaScript&quot;>
<!--
function makeEmail(form) {
var i = form.groupLists.value;
var cellData = document.myCell;
cellData = document.write(&quot;This is a test&quot;
//alert(&quot;The email address is &quot; + i);
alert(cellData);
}
//-->
</script>

And the HTML looks as follow:

<div id=&quot;myCell&quot;><a href=&quot;mailto:&quot;>[EMAIL]</a></div>

I know this is all kinds of messed up so I'm hoping someone can steer me in the right direction. Bascially what I want to happen here is this:

1) A user selects an item in a dropdown menu
2) An onChange directive is called and depending on the value of the
dropdown box, the text in the <div></div> tags is changed.

Where am I going wrong?

 

[theboyhope]

Here's an example of one way of manipulating the text within a table cell. (There are, of course, plenty of other ways.)

<script>

function cellText() {

	cell = document.getElementsByTagName( &quot;td&quot;)[ 0 ];
	cell.firstChild.data = &quot;Working!&quot;;
}

</script>

<table border=&quot;1&quot;>
  <tr>
    <td>row one cell one</td>
    <td>row one cell two</td>
    <td>row one cell three</td>
  </tr>

  <tr>
    <td>row two cell one</td>
    <td>row two cell two</td>
    <td>row two cell three</td>
  </tr>
</table>

<a onclick=&quot;cellText();&quot;>click me</a>

 

[mtorbin]

Thanks, but I couldn't get this example to work....

 

[theboyhope]

What browser?

 

[mtorbin]

Netscape7

 

[theboyhope]

Buggrit.

I only checked in Mozzy and IE6. What's the error?

 

[mtorbin]

Just won't run which is a pretty clear indication that it's proprietary, but if you checked it in Mozilla it should work... that's odd.

Let's pose the problem this way. I have a <div> defined and I want to change its contents:


<div id=&quot;myDiv&quot;>CURRENT CONTENTS</div>


What would the function look like:

<script language=&quot;JavaScript&quot;>
<!--
function myChanger() {
[WHAT WOULD GO HERE]
}
//-->
</script>

 

[mtorbin]

We could even pose the question this way:

I have an image with a link to it. I want to change the reference in the link depending on what the value of the dropdown box is. How would this be easily accomplished?

 

[theboyhope]

&quot;Just won't run which is a pretty clear indication that it's proprietary&quot; - eh?

Anyway, you get nothing in the Javascript Console?

 

[mtorbin]

Well, I tried something new and I got this error msg:

Error: uncaught exception: [Exception... &quot;Modifications are not allowed for this document&quot; code: &quot;7&quot; nsresult: &quot;0x80530007 (NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR)&quot; location: &quot;mailList.html Line: 14&quot;]

I just saw it run, so is this now a CHMOD issue? Argh, my head hurts...

 

[theboyhope]

&quot; [WHAT WOULD GO HERE] &quot;

	function myChanger() {

		el = document.getElementById( "myDiv" );
		el.firstChild.data = "Testing.";
	}

 

[theboyhope]

Quote: &quot;I have an image with a link to it. I want to change the reference in the link depending on what the value of the dropdown box is. How would this be easily accomplished?&quot;

Is this what you mean?

<script>

function updateLink( sel ) {

	link = document.getElementById( &quot;test&quot; );
	link.href = sel.options[ sel.options.selectedIndex ].value;
}

</script>

<form>

<select onchange=&quot;updateLink( this );&quot;>

  <option value=&quot;[URL unfurl="true"]http://www.theregister.co.uk&quot;>The[/URL] Register</>

  <option value=&quot;[URL unfurl="true"]http://www.google.co.uk&quot;>Google</>[/URL]

  <option value=&quot;[URL unfurl="true"]http://www.bbc.co.uk&quot;>BBC</>[/URL]

  <option value=&quot;[URL unfurl="true"]http://www.zeldman.com&quot;>Big[/URL] Jeff</>

</select>

</form>

<p><a href=&quot;[URL unfurl="true"]http://www.theregister.co.uk&quot;[/URL] id=&quot;test&quot;>Testing</a></p>

 

[mtorbin]

No, not quite what I was after. Try this and you'll see what I'm trying to accomplish:

<html>
<head>
<title>Dynamic Text in JavaScript</title>
<script language=&quot;Javascript&quot;>
function ChangeTitle() {
var currentValue = document.form1.groupList.value;
var emailLink = document.getElementById(&quot;dynamicEmail&quot;

currentValue = &quot;<a href='

http://www.google.com'>&quot;+currentValue+&quot;</a>&quot;;

emailLink.firstChild.nodeValue=currentValue;
}
</script>
</head>
<body>
<div ID=&quot;dynamicEmail&quot;>Dynamic Text in JavaScript</div>
<p>Using the W3C DOM, you can dynamically
change the heading at the top of this
page. Enter a new title and click the
Change button.</p>
<form name=&quot;form1&quot;>
<select name=&quot;groupList&quot; onChange=&quot;ChangeTitle();&quot;>
<option value=&quot;This is a test&quot;>This is a test</option>
<option value=&quot;This is another test&quot;>This is another test</option>
<option value=&quot;This is really annoying&quot;>This is really annoying</option>
</select>

<input type=&quot;button&quot; value=&quot;Change!&quot;
onClick=&quot;ChangeTitle();&quot;>
</form>
</body>

</html>

 

[mtorbin]

I'VE ALMOST GOT IT!! Take a look at this code. There's only one thing wrong with the link that's created. It adds my link to the end of the domain that you are currently at, such as:

http://www.mydomain.com/www.google.com

How can I fix this:

<html>
<head>
<title>Dynamic Text in JavaScript</title>
<script language=&quot;Javascript&quot;>
function ChangeTitle() {
var currentValue = document.form1.groupList.value;
var emailLink = document.getElementById(&quot;dynamicEmail&quot;
var dynamicLink = currentValue;

emailLink.firstChild.nodeValue=currentValue;

document.links[0].href = dynamicLink;
}
</script>
</head>
<body>
<a href=&quot;#&quot;><div ID=&quot;dynamicEmail&quot;>Dynamic Text in JavaScript</div></a>
<p>Using the W3C DOM, you can dynamically
change the heading at the top of this
page. Enter a new title and click the
Change button.</p>
<form name=&quot;form1&quot;>
<select name=&quot;groupList&quot; onChange=&quot;ChangeTitle();&quot;>
<option value=&quot;

http://www.google.com&quot;>www.google.com</option>

<option value=&quot;

http://www.peigenesis.com&quot;>www.peigenesis.com</option>

<option value=&quot;

http://www.amazon.com&quot;>www.amazon.com</option>

</select>

<input type=&quot;button&quot; value=&quot;Change!&quot;
onClick=&quot;ChangeTitle();&quot;>
</form>
</body>

</html>

 

[jdaniels]

Here's what you do:

// in the javascript section...

document.layers['myLayer'].innerHTML = &quot;Text in the layer&quot;;


ib the HTML

<layer ID=&quot;myLayer></layer>

Points to remember are:
a) a DIV or SPAN in MSIE is equivalent to a LAYER in NS
b) given point (a) you have to reference them differently. A general rule is, in the javascript, to swap the word 'layers' for the word 'all' when using MSIE. This is a bit off the top of my head as I don't use NS very often, but it's something like the above.

HTH

Jon

 

[jdaniels]

Here's what you do:

// in the javascript section...

document.layers['myLayer'].innerHTML = &quot;Text in the layer&quot;;


ib the HTML

<layer ID=&quot;myLayer&quot;></layer>

Points to remember are:
a) a DIV or SPAN in MSIE is equivalent to a LAYER in NS
b) given point (a) you have to reference them differently. A general rule is, in the javascript, to swap the word 'layers' for the word 'all' when using MSIE. This is a bit off the top of my head as I don't use NS very often, but it's something like the above.

HTH

Jon

 

[mtorbin]

Ah, but the unfortunate thing is that this solution isn't a cross-browser solution, is it? Not that it's a problem now (because it's for an Intranet where I can control what browsers people use) but I still have that web bug in me where I want to make everything work on every platform.

I'll give it a shot, thanks!

- MT