PDA

View Full Version : JavaScript Tables Question



ttreat31
Mar 14th, 2007, 09:41 PM
Hello,

I don't know JavaScript, but I was told I should probably use it for something I want to do. I have a table, and I want each <td> to change background colors when the mouse hovers over it. Can this be done with JavaScript?

Thanks.

Mr J
Mar 14th, 2007, 11:35 PM
There's probably other ways but give this a try


<script type="text/javascript">

onload=function changeBg(){
tds=document.getElementById("mytable").getElementsByTagName("TD")

for(i=0;i<tds.length;i++){
tds[i].onmouseover=function(){
this.style.backgroundColor="red"
}
tds[i].onmouseout=function(){
this.style.backgroundColor=""
}
}
}

</script>

<table id="mytable" border="1">
<tr>
<td>Hello World</td>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>

ttreat31
Mar 15th, 2007, 03:35 AM
Hmm...I have a bit of a problem though. Each cell in the table is broken up into 3 different <td>s, so you have to hover over all the different <td>s for them to change colors. Could I just change it so it uses <div>s instead of <td>s and put <div>s around the entire table cells?

Edit: That didn't seem to work. It still highlighted individual <td>s...

carlitos_way
Mar 15th, 2007, 09:49 AM
Hmm...I have a bit of a problem though. Each cell in the table is broken up into 3 different <td>s, so you have to hover over all the different <td>s for them to change colors. Could I just change it so it uses <div>s instead of <td>s and put <div>s around the entire table cells?

Edit: That didn't seem to work. It still highlighted individual <td>s...

checking for the TR instead of the TD?

Mr J
Mar 15th, 2007, 03:04 PM
A cell refers to a td not a tr

Try this


<script type="text/javascript">

onload=function changeBg(){
trs=document.getElementById("mytable").getElementsByTagName("TR")

for(i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
this.style.backgroundColor="red"
}
trs[i].onmouseout=function(){
this.style.backgroundColor=""
}
}
}

</script>

<table id="mytable" border="1">
<tr>
<td>Hello World</td>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>

Kor
Mar 15th, 2007, 03:22 PM
I might be pedantic, sorry, but... it is a good habit to use local variables whenever you don't need a global one for all means:

for(var i=0;i<trs.length;i++)

Mr J
Mar 15th, 2007, 06:15 PM
Kor.

You are correct and I usually do can't think why I missed it off this time:o

ttreat31
Mar 16th, 2007, 01:03 AM
Still getting the problem of it highlighting only individual cells within the cell. Also, I have two main cells per row with each cell divided into multiple cells and a smaller table for text. Here's the structure of one row (I know it's ugly, bear with me):


<tr>
<td width="322" height="116" valign="top" bgcolor="#FFFFFF" id=contentbox><div><table width="100%" height="111" border="0" cellpadding="0" cellspacing="0">
<div id=contentbox><tr>
<td width="60" height="109" rowspan="2" valign="top"><div align="left"><img src="images/image1.png" width="57" height="109" /></div></td>
<td height="21" valign="top"><div align="right" class="style17">
<p align="right"><a href="/test2/test9.html" class="style18">TITLE HERE</a><br />
</p>
</div></td>
</tr></div>
<tr>
<td height="90" valign="top" class="text"><div align="left">TEXT HERE</div></td>
</tr>
</table></div></td>
<td width="9" valign="top">&nbsp;</td>
<td width="322" height="116" valign="top" bgcolor="#FFFFFF" id=contentbox><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="114" rowspan="2"><div align="center"><img src="images/image2.png" width="60" height="109" /></div></td>
<td height="21" valign="top"><div align="right" class="style18 style21"><a href="/test2/test8.html"><strong>TITLE HERE</strong></a> </div></td>
</tr>
<tr>
<td height="90" valign="top" class="text"><div align="left">TEXT HERE</div></td>
</tr>
</table></td>
<td width="7" valign="top">&nbsp;</td>
</tr>

Somehow, I'd like to have each main cell (including cells within the main cells) be highlighted.

felgall
Mar 16th, 2007, 03:07 AM
The <div> between the <table> and the <tr> is invalid. Try replacing it with a <tbody> instead.

ttreat31
Mar 16th, 2007, 03:26 AM
The <div> between the <table> and the <tr> is invalid. Try replacing it with a <tbody> instead.

Okay, now this is strange (to me). I removed the invalid <div> and the entire main table disappeared. :confused:

P.S. The affect I'm looking for is like the one found here when hovering over items: http://www.sitescripts.com/PHP/Content_Management/page2ta.html

Mr J
Mar 16th, 2007, 03:31 PM
hmm, nested tables as well



<script type="text/javascript">

onload=function changeBg(){
myTables=document.getElementById("mytable").getElementsByTagName("table")

for(var i=0;i<myTables.length;i++){
myTables[i].onmouseover=function(){
this.style.backgroundColor="red"
}
myTables[i].onmouseout=function(){
this.style.backgroundColor=""
}
}
}

</script>

<table border="1" id="mytable">
<tr>
<td width="322" height="116" valign="top" bgcolor="#FFFFFF" id=contentbox>

<table width="100%" height="111" border="1" cellpadding="0" cellspacing="0">
<tbody id=contentbox>
<tr>
<td width="60" height="109" rowspan="2" valign="top">
<div align="left"><img src="images/image1.png" width="57" height="109" /></div>
</td>
<td height="21" valign="top"><div align="right" class="style17">
<p align="right"><a href="/test2/test9.html" class="style18">TITLE HERE</a><br />
</p>
</td>
</tr>
<tr>
<td height="90" valign="top" class="text"><div align="left">TEXT HERE</div></td>
</tr>
</tbody>
</table>

</td>
<td width="9" valign="top">&nbsp;</td>
<td width="322" height="116" valign="top" bgcolor="#FFFFFF" id=contentbox>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="114" rowspan="2"><div align="center"><img src="images/image2.png" width="60" height="109" /></div></td>
<td height="21" valign="top"><div align="right" class="style18 style21"><a href="/test2/test8.html"><strong>TITLE HERE</strong></a> </div></td>
</tr>

<tr>
<td height="90" valign="top" class="text"><div align="left">TEXT HERE</div></td>
</tr>
</table>

</td>
<td width="7" valign="top">&nbsp;</td>
</tr>
</table>

ttreat31
Mar 16th, 2007, 10:04 PM
That works except for one problem. Go here and you'll see the problem when you hover over the boxes. The background also lights up.

http://www.clarionmedia.com/test2/services.html

Mr J
Mar 17th, 2007, 12:32 AM
Try this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<title>Clarion Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
background-color: #46463f;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.main_nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
.style15 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style16 {color: #CC6600}

td#contentbox { border: 1px solid orange}
.style17 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
font-style: normal;
}
a { display: block
font-style: normal;
}
td#contentbox { display: block}
.style18 {color: #000000}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link#needhelp { color: #FF9900}
a:visited#needhelp { color: #996600}
a:hover#needhelp { color: #0099FF}

a:link { color: #FF9900}
a:visited { color: #CC6600}
a:hover { color: #0099FF}
.style21 {
font-size: 18px;
color: #CC6600;
font-family: Arial, Helvetica, sans-serif;
}
.style25 {
color: #FF9900;
font-size: 18px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style26 {
color: #FF9900;
font-weight: bold;
}
.style28 {font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #FF9900; }
-->
</style>
<script type="text/javascript">

onload=function changeBg(){
myTables=document.getElementsByTagName("table")

for(var i=0;i<myTables.length;i++){

if(myTables[i].className.indexOf("mt")!= -1){
myTables[i].onmouseover=function(){
this.style.backgroundColor="#e1dac8"
}
myTables[i].onmouseout=function(){
this.style.backgroundColor=""
}
}

}

}

</script>

</head>
<body>

<table width="766" height="168%" border="0" align="center" cellpadding="0" cellspacing="0" id="services">
<tr>
<td width="41" rowspan="9">&nbsp;</td>
<td height="17" colspan="8">&nbsp;</td>
<td width="83" rowspan="9">&nbsp;</td>
</tr>
<tr>
<td width="155" height="155" colspan="2" rowspan="4"><a href="/test2/index.html"><img src="images/banner_logo.gif" title="Welcome to Clarion Media!" alt="Clarion Media Logo" width="155" height="155" border="0"></a></td>
<td height="68" colspan="6">&nbsp;</td>
</tr>
<tr>
<td height="24" colspan="5" background="images/banner_text.gif"/>*
<td height="24"/>
</td>
</tr>
<tr>
<td width="12" height="50">&nbsp;</td>
<td width="129" height="50"><div align="left"><a href="/test2/index.html"><img src="images/navigation/home_unselected.gif" alt="Home" width="129" height="50" border="0" title="Click here to return to the Home page"></a></div></td>
<td width="129" height="50"><div align="left"><a href="/order.html"><img src="images/navigation/order_unselected.gif" alt="Order" width="129" height="50" border="0" title="Click here to order our services"></a></div></td>
<td width="129" height="50"><div align="left"><a href="/testimonials.html"><img src="images/navigation/testimonials_unselected.gif" alt="Testimonials" width="129" height="50" border="0" title="Click here to see what our customers have to say"></a></div></td>
<td width="129" height="50"><div align="left"><a href="/contact_us.html"><img src="images/navigation/contactus_unselected.gif"" width="129" height="50" border="0" title="Click here to contact us" alt="Contact Us"></a></div></td>
<td width="0">&nbsp;</td>
</tr>
<tr>
<td height="12" colspan="6">&nbsp;</td>
</tr>
<tr>
<td height="760" colspan="8">

<table width="100%" height="758"border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="5" height="758" background="images/services/content_bg_left.gif">&nbsp;</td>
<td width="677" valign="top" background="images/services/content_bg.gif"><div align="right">
<p><br />
<img src="images/services/services_header.gif" width="505" height="80" /></p>

<table width="99%" height="561"border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30" colspan="4" valign="top"><div align="left" class="style15"> <a href="/contact_us.html" class="style16" id=needhelp>Aren't exactly sure what you want?<br />
Let us help you!</a></div></td>
</tr>
<tr>
<td height="5" colspan="4" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="322" height="116" valign="top" bgcolor="#FFFFFF" id=contentbox><div id="box">

<table class="mt" width="100%" height="111"border="0" cellpadding="0" cellspacing="0">
<div id=contentbox><tr>
<td width="60" height="109" rowspan="2" valign="top"><div align="left"><img src="images/services/custom_website.png" width="57" height="109" /></div></td>
<td height="22" valign="top"><div align="right" class="style17">
<p align="right"><a href="/test2/services/custom_website.html" class="style18">Custom Website</a><br />
</p>
</div></td>
</tr></div>
<tr>
<td height="100" valign="top" class="text"><div align="left">We develop a customized website according to your specifications. You have the choice of adding a custom template, a custom CMS (content management system), forums, and hosting. This is the perfect option for anyone looking for a serious web presence!</div></td>
</tr>
</table>
</div>

</td>
<td width="9" valign="top">&nbsp;</td>
<td width="322" height="116" valign="top" bgcolor="#FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="114" rowspan="2"><div align="center"><img src="images/services/joomla.png" width="60" height="109" /></div></td>
<td height="22" valign="top"><div align="right" class="style18 style21"><a href="/test2/servoces/joomla.html"><strong>Joomla! CMS</strong></a> </div></td>
</tr>
<tr>
<td height="100" valign="top" class="text"><div align="left">Joomla! is one of the most powerful and flexible open source content management systems available. It can be used in many ways, ranging from personal websites to complex, corporate web applications. The perfect choice for someone looking for a low-cost solution!</div></td>
</tr>
</table>

</td>
<td width="7" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="4" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="322" height="109" valign="top" bgcolor="FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="109" rowspan="2"><div align="center"><img src="images/services/custom_cms.png" width="60" height="109" /></div></td>
<td height="22" valign="top" class="style18"><div align="right"><span class="style25"><a href="/test2/services/custom_cms.html">Custom CMS Solutions</a></span></div></td>
</tr>
<tr>
<td height="100" valign="top"><div align="left" class="text">A CMS (content management system) is a website application designed to assist users in the process of content management. This solution eases the task of maintaining a website. We will design you a customized CMS, great for those looking for a unique application. </div></td>
</tr>
</table>

</td>
<td width="9" height="112" valign="top">&nbsp;</td>
<td width="322" height="109" valign="top" bgcolor="FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="109" rowspan="2"><div align="center"><img src="images/services/templates.png" width="60" height="109" /></div></td>
<td height="23" valign="top"><div align="right" class="main_nav style26"><a href="/test2/services/template_services.html">Template Services</a> </div></td>
</tr>
<tr>
<td height="100" valign="top" class="text"><div align="left">Clarion Media will, based on your specifications, design a template for your website, and code it into an HTML format or integrate it into a CMS, additionally. If you are seeking a unique template for your website, then this is what you need!</div></td>
</tr>
</table>

</td>
<td width="3" height="112" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="4" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="322" height="109" valign="top" bgcolor="FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="109" rowspan="2"><div align="center"><img src="images/services/custom_scripts.png" width="56" height="109" /></div></td>
<td height="22" valign="top"><div align="right"><strong><span class="style28"><a href="/test2/services/custom_scripts.html">Custom Scripts</a> </span></strong></div></td>
</tr>
<tr>
<td height="100" valign="top" class="text"><p align="left">A web script is a set of instructions that an Internet browser executes. Then, it returns data to the browser. There are scripts for all kinds of things—some simple, and some complex. We can create and install a customized script just for your website! </p></td>
</tr>
</table>

</td>
<td width="9" height="114" valign="top">&nbsp;</td>
<td width="322" height="109" valign="top" bgcolor="FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="109" rowspan="2"><div align="center"><img src="images/services/script_installation.png" width="54" height="109" /></div></td>
<td height="22" valign="top"><div align="right"><strong><span class="style28"><a href="/test2/services/script_installation.html">Script Installation </a></span></strong></div></td>
</tr>
<tr>
<td height="100" valign="top" class="text"><div align="left">Allow us to install any scripts you need onto your server! Tell us what you are looking for and we'll recommend the perfect script, install it, and optimize it for a minimal charge! </div></td>
</tr>
</table>

</td>
<td width="3" height="114" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="4" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="322" height="112" valign="top" bgcolor="FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="109" rowspan="2"><div align="center"><img src="images/services/custom_offer.png" width="51" height="94" /></div></td>
<td height="22"><div align="right"><strong><span class="style28"><a href="/test2/services/custom_offer.html">Custom Offer </a></span></strong></div></td>
</tr>
<tr>
<td height="100" valign="top" class="text"><div align="left">Perhaps none of these offers interest you, or maybe you're looking for a combination of these. No problem! We can come up with a custom proposal and price based on what you're looking for! </div></td>
</tr>
</table>

</td>
<td width="9" height="112" valign="top">&nbsp;</td>
<td width="322" height="112" valign="top" bgcolor="FFFFFF" id=contentbox>

<table class="mt" width="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="109" rowspan="2"><img src="images/services/hosting.png" width="60" height="81" /></td>
<td height="22"><div align="right"><strong><span class="style28"><a href="/test2/services/custom_offer.html">Web Hosting Solutions</a></span></strong></div></td>
</tr>
<tr>
<td height="100" valign="top" class="text"><div align="left">Through our trusted affiliate ICDSoft, we can provide you with secure and reliable hosting for your website at discount prices. ICDSoft strives to assure customers with &quot;24/7 network monitoring, 99.9% server uptime, and an always-on support team.&quot;</div></td>
</tr>
</table>

</td>
<td width="3" height="112" valign="top">&nbsp;</td>
</tr>
</table>

<p align="left"><br />
</p>
</div></td>
<td width="5" background="images/services/content_bg_right.gif">&nbsp;</td>
</tr>
</table>

</td>
</tr>
<tr>
<td height="20" colspan="8"><a href="/test2/index.html"><img src="images/copyright.gif" alt="Copyright 2007 Clarion Media" width="116" height="20" border="0"/></a><a href="/privacy_policy.html"><img src="images/privacy_policy.gif" title="Read our privacy policy" alt="Privacy Policy" width="78" height="20" border="0"/></a></td>
</tr>
<tr>
<td height="19" colspan="8">&nbsp;</td>
</tr>
<tr>
<td height="19" colspan="8">&nbsp;</td>
</tr>
</table>
</body>
</html>

ttreat31
Mar 17th, 2007, 01:50 AM
I cannot thank you enough sir. Works flawlessly.

ttreat31
Mar 19th, 2007, 03:53 AM
One last thing (I promise). I want the same effect on another page, and I added the JavaScript, but it didn't work. I'm not quite sure what you did to the above code, so I don't know what to modify. Here's the code for the table that I want affected:


<table width="688" height="314" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="170" bgcolor="#FFFFFF"><a href="/test2/about_us.html"><img src="images/about_us.png" title="Learn more about Clarion Media" alt="About Us" width="175" height="314" border="0"/></a></td>
<td width="172" bgcolor="#FFFFFF"><a href="/test2/services/"><img src="images/services.png" title="Learn more about our solutions" alt="Services" width="170" height="314" border="0"/></a></td>
<td width="170" bgcolor="#FFFFFF"><a href="/pricing.html"><img src="images/pricing.png" title="Learn more about our pricing" alt="Pricing" width="171" height="314" border="0"/></a></td>
<td width="176" bgcolor="#FFFFFF"><a href="/test2/clients.html"><img src="images/clients.png" title="See a list of our clients" alt="Clients" width="173" height="314" border="0"/></a></td>
</tr>
</table>

You can view the page here:

http://www.clarionmedia.com/test2/index.html

Mr J
Mar 19th, 2007, 03:29 PM
The script from my first post should be ok for that


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

onload=function changeBg(){
tds=document.getElementById("mytable2").getElementsByTagName("TD")

for(i=0;i<tds.length;i++){
tds[i].onmouseover=function(){
this.style.backgroundColor="#e1dac8"
}
tds[i].onmouseout=function(){
this.style.backgroundColor=""
}
}
}

</script>

</HEAD>
<BODY>

<table id="mytable2" width="688" height="314" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="170" bgcolor="#FFFFFF"><a href="/test2/about_us.html"><img src="images/about_us.png" title="Learn more about Clarion Media" alt="About Us" width="175" height="314" border="0"/></a></td>
<td width="172" bgcolor="#FFFFFF"><a href="/test2/services/"><img src="images/services.png" title="Learn more about our solutions" alt="Services" width="170" height="314" border="0"/></a></td>
<td width="170" bgcolor="#FFFFFF"><a href="/pricing.html"><img src="images/pricing.png" title="Learn more about our pricing" alt="Pricing" width="171" height="314" border="0"/></a></td>
<td width="176" bgcolor="#FFFFFF"><a href="/test2/clients.html"><img src="images/clients.png" title="See a list of our clients" alt="Clients" width="173" height="314" border="0"/></a></td>
</tr>
</table>

</BODY>
</HTML>