Clickable Table Cells

JAG7 · Nov 1, 2001

Currently, I'm able to make a table cell "linkable" based on the href attribute in an <a> tag (the way Hotmail used to). IE uses the scripting...

function mClk(src)
{
if(event.srcElement.tagName == 'TD')
{
src.children.tags('a')[0].click();
}
}

...and naturally, this only works in IE 4+. Using the 'childNodes' in DOM1, or any other tags, can I get a similar effect in NN6? I think NN4 is out-of-the-question.

jG

jsLove · Nov 1, 2001

JAG7,

i havent really researched it much, but i found this nifty little page:

<html>
<!- Written by Keith Swerling at

http://www.TopiXonline.com

<!- Clickable Table Regions, as seen on

http://www.TopiXonline.com

<!- Help me make it better KeithS@TopiXonline.com
<head>
<SCRIPT LANGUAGE="javascript">
<!-- Hide

function tableOut(thiss) {
thiss.style.borderColor='white';
thiss.style.backgroundColor='white';
}

function tableOver(thiss) {
thiss.style.borderColor="#999999";
window.status="Click here for Details";
}

function roll(thiss) {
thiss.style.backgroundColor="yellow";
parent.location.href=('

http://www.topixonline.com/cgi-bin/sgsc0101.exe?SRCCODE=WEKE007&FNM=04&GEN0=TV306');

}

function details() {
window.status='Click here for Details';
}
</script>
</head>

<body>
Sorry I don't have more time for Verbage. I will try and write more. If you have questions that I can answer about this script, let me know. KeithS@TopiXonline.com.<br>
<br>
<TABLE border=0 CELLSPACING=0 cellpadding=0 valign="top" width=300 STYLE="cursor: hand" style="TABLE-LAYOUT:fixed;" align=center>
<tr>
<td valign="TOP" width=225>
<table border=0 cellspacing=0 width=100% style="border:2px solid white;TABLE-LAYOUT:fixed;" onclick=roll(this) onMouseover=tableOver(this) onMouseout=tableOut(this) height=44>
<TR>
<td width=2></td>
<th width=44>
<a href="/cgi-bin/sgsc0101.exe?SRCCODE=WEKE007&FNM=04&GEN0=TV306" title="Click here for Details" onmouseover="details(); return true;"><Img alt="Click here for Details" SRC="/images/p2372T.JPG" border=0 height=40 width=40></a>
</th>
<td width=1></td>
<th width=181 align=left>
<font face="Arial,Verdana,helvetica, ms fixed width" size=1><a href="/cgi-bin/sgsc0101.exe?SRCCODE=WEKE007&FNM=04&GEN0=TV306" title="Click here for Details" onmouseover="details(); return true;">Planet TopiX Universal Remote</a> <b><nobr> - <font color=red>$24.95</nobr></b>
</th>
</TR>
</table>
</td>
</tr>
</table>
</body>
</html>

--i hope you can use it

~ jsLove

JAG7 · Nov 2, 2001

Works very well, with one caveat...the URL in 'parent.location.href' is hard-coded. I need to find a way to get the href value in the <a> tag from the <td> tag, hence:

<td onClick="javascriptFunction">
<a href="something.html">
</td>

I'm thinking something like:

onClick="parent.location.href(this.firstChild);"

...or something to that effect. Any ideas (and thanks for the tip!..I'll keep playing with it).

jsLove · Nov 2, 2001

JAG7,

hmm, you mean you want the href to be variable?

....you might try:

<td onClick="YourFunction(something.html)">Click Here!</td>

....this way you can pass the url link to the function.

your function would be like:

YourFunction(UrlLink){
parent.location.href=(UrlLink);
}

...with whatever modifications you like of course

...hope it helps
~ jsLove

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!

Clickable Table Cells

JAG7

Technical User

jsLove

Programmer

JAG7

Technical User

jsLove

Programmer

Similar threads

Part and Inventory Search

Sponsor