Menu
I am trying to use javascript to apply CSS classes to an HTML table I have on a website. Every other row should be the same color + there should be a hover color on mouseover. I have tested the table outside the site & I don’t think this is a javascript issue, I believe it is something with CSS. I have been looking at this for several hours, but perhaps another pair of eyes can alert me to the issue? Thanks! confused:
HTML
[CODE]<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Website</title>
<link rel=”stylesheet” type=”text/css” href=”css/styles1.css” media=”screen” />
<script type=”text/javascript” src=”scripts/links.js”></script>
</head>
<body>
<div id=”wrapper”>
<div id=”masthead”>
<h1>Header 1</h1>
<h2>Header 2</h2>
</div>
<ul id=”navbar”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”faq.html”>FAQ</a></li>
<li><a href=”links.html”>Links</a></li>
<li><a href=”gallery.html”>Photos</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
<div id=”content”>
<h1>Resources</h1>
<table id=”myTable”>
<tr>
<th>Number</th>
<th>Link Address</th>
</tr>
<tr>
<td>1</td>
<td><a href=”http://www.google.com” rel=”nofollow”>Link 1</a></td>
</tr>
<tr>
<td>2</td>
<td><a href=”http://www.google.com” rel=”nofollow”>Link 2</a></td>
</tr>
<tr>
<td>3</td>
<td><a href=”http://www.google.com” rel=”nofollow”>Link 3</a></td>
</tr>
<tr>
<td>4</td>
<td><a href=”http://www.google.com” rel=”nofollow”>LInk 4</a></td>
</tr>
</table>
<p> </p>
</div>
</div>
<div id=”bottom”></div>
</body>
</html>
Javascript:
[CODE]
window.onload = function(){stripeyTables();
}
//ADD CLASS FUNCTION TO APPEND CSS VALUES TO ANY OTHER CSS
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= ” “;
newClassName+= value;
element.className = newClassName; }
}
//Alternate Table Rows & Hover Color Function
function stripeyTables() {
if (!document.getElementsByTagName) return false;
var table = document.getElementById(“myTable”);
var odd = false;
var rows = table.getElementsByTagName(“tr”);
for (var j=1; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],”first”);
odd = false;
} else {
addClass(rows[j],”second”);
odd = true;
}
rows[j].oldClassName = rows[j].className
rows[j].onmouseover = function() {
addClass(this,”hover”);
}
rows[j].onmouseout = function() {
this.className = this.oldClassName
}
}
}
CSS:
[CODE]
#myTable {
border: 1px solid #333;
border-collapse: collapse;
}
#myTable th, #myTable td {
padding: 5px;}
.first {
background: #78AB46;
}
.second {
background: #8E2323;
}
.hover {
background: #CFCD11;
}
th, td {
padding: 5px;
}