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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Referencing a Table Cell in JavaScript

Status
Not open for further replies.

mtorbin

Technical User
Nov 5, 2002
369
US
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
 
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
 
This thread appears to be going in about three different directions. :)

In you "Dynamic Text in JavaScript" example, if you add " to the start of the option values it'll work.

HTH.
 
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 :)
 
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 " addition and then I'll go from there.

- MT
 
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
 
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=&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; <option value=&quot; <option value=&quot; <option value=&quot;mailto:mtorbin@peigenesis.com&quot;>Email Matt Torbin</option>
</select>

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

</html>


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

- MT
 
BTW, do you think there's some way to strip the &quot;mailto:&quot; 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.
 
I was playing around with your script a bit and I'd already adapted it to lose the &quot;mailto:&quot;. 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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top