Referencing a Table Cell in JavaScript

mtorbin · Dec 2, 2003

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!&quot

;

Any suggestions?

- MT

jdaniels · Dec 3, 2003

Well, a cross-platform solution in JS tends to mean coding as many branches as there are plaforms, which is a bit of a dirty hack, but seems to be the standard. All this said, the table-based solution by 'theboyhope' looks good. I've never seen that ...

Jon

theboyhope · Dec 3, 2003

This thread appears to be going in about three different directions.

In you "Dynamic Text in JavaScript" example, if you add "

http://"

to the start of the option values it'll work.

HTH.

stormbind · Dec 3, 2003

msie supports table.cells as an array, and rows should have children.

by coincidence i'm using table.cells[n] in a current project, works wonderfully

mtorbin · Dec 3, 2003

See, thhat's what I figured... I used it when I developed iTV applications but I haven't used it since. I'm going to try TheBoyHope's recent suggestion concerning the "

http://"

addition and then I'll go from there.

- MT

mtorbin · Dec 3, 2003

Works perfectly TBH, thanks. Now (as if there weren't enough twists and turns), I'm going to throw one more wrench in the loop. I want that address to me a mailto address as in:

mailto: theboyhope@mydomain.com

LOL, what are the chances this will actually work?

- MT

mtorbin · Dec 3, 2003

OK, I'm proud to report it works perfectly! Here is the final result in case anyone would like to accomplish something like this in the future:

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

;
var dynamicLink = currentValue;

emailLink.firstChild.nodeValue=currentValue;

document.links[0].href = dynamicLink;
}
</script>
</head>
<body>
<a href="#"><div ID="dynamicEmail">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="form1">
<select name="groupList" onChange="ChangeTitle();">
<option value="

http://www.google.com">www.google.com</option>

<option value="

http://www.peigenesis.com">www.peigenesis.com</option>

<option value="

http://www.amazon.com">www.amazon.com</option>

<option value="mailto:mtorbin@peigenesis.com">Email Matt Torbin</option>
</select>

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

</html>

Enjoy and thanks again to everyone who helped me with this!

- MT

mtorbin · Dec 3, 2003

BTW, do you think there's some way to strip the "mailto:" from the actual text that shows up on the web page? I know this is a technicality but I'd love to get rid of that.

theboyhope · Dec 3, 2003

I was playing around with your script a bit and I'd already adapted it to lose the "mailto:". You'll be able to see how to do it from the code I expect.

Code:

<script type=&quot;text/javascript&quot;>

	function changeTitle( sel ) {

		if( typeof sel == &quot;string&quot; ) {

			var sel = document.getElementById( sel );
		}

		var selectedValue = sel.options[ sel.options.selectedIndex].value;
		var optionText = sel.options[ sel.options.selectedIndex].text;

		var emailLink = document.getElementById( &quot;dynamicEmail&quot; );

		emailLink.firstChild.nodeValue = optionText;
		emailLink.title = optionText;
		emailLink.href = selectedValue;
	}

</script>

<a href=&quot;javascript:void( 0 );&quot; id=&quot;dynamicEmail&quot; title=&quot;Dynamic Text in Javascript&quot;>Dynamic Text in JavaScript</a>

<form>

  <select id=&quot;groupList&quot; onchange=&quot;changeTitle( this );&quot;>

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

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

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

    <option value=&quot;mailto:info@whatever.com&quot;>Contact by email</option>

  </select>
  
<input type=&quot;button&quot; value=&quot;Change!&quot; onclick=&quot;changeTitle( 'groupList' );&quot; />

</form>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Referencing a Table Cell in JavaScript

mtorbin

Technical User

jdaniels

Technical User

theboyhope

IS-IT--Management

stormbind

Technical User

mtorbin

Technical User

mtorbin

Technical User

mtorbin

Technical User

mtorbin

Technical User

theboyhope

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor