Applying javascript to only one table in a html file

[neash83]

I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows.

However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them

How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript.

<style type="text/css" media="all">
table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse}
td { border: 1px solid black; cursor:pointer;text-align:center}
/* row 1 */
tr td { background: #edf3fe; }
tr:hover td, tr.ie td { background: #e1e1ff; }
/* row 2 */
tr.bis td { background: #D9ECFF; }
tr.bis:hover td, tr.bisie td { background: #e1e1ff; }
/* selected row 1 */
tr.sel:hover td, tr.selie td { background: #edf3fe; }
/* selected row 2 */
tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; }
</style>
<script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable">

var IE = false; /*@cc_on IE=true; @*/

var r;

function setRows(){
r = document.getElementsByTagName('TR');
for(var i=0;i<r.length;i++)
r[i].className = (i/2 != Math.round(i/2))? '':'bis';
}

function selectRow(aRow,add){
var c = aRow.className;
if(add) setRows();
var b = aRow.className;
if(IE)
aRow.className =
b==''? 'selie' :
b=='bis'? 'selbisie' :
c=='selie'? 'ie' :
c=='ie'? 'selie' :
c=='bisie'? 'selbisie' :
c=='selbisie'? 'bisie' :
'';
else
aRow.className =
b==''||c==''? 'sel' :
b=='bis'||c=='bis'? 'selbis' :
c=='selbis'? 'bis' :
'';
}
// roll-over (only for IE)
function roll(what) {
var c = what.className;
what.className = c==''? 'ie' :
c=='bis'? 'bisie' :
c=='bisie'? 'bis' :
c=='selbis'? 'selbisie' :
c=='selbisie'? 'selbis' :
c=='selie'? 'sel' :
c=='sel'? 'selie' :
'';
}
// fire on loading
onload= function() {
setRows();
for(var i=0;i<r.length;i++) {

if(IE) {
r[i].onmouseover = function(){ roll(this); }
r[i].onmouseout = function(){ roll(this); }
}
}
}

</script>
<style type="text/css">
table.altrowstable {
	font-family: calibri;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #C0C0C0;
	border-collapse: collapse;
}
table.altrowstable th {
	border-width: 1px;
	"background-image:url('QP Header.png');"
	border-style: solid;
	border-color: #C0C0C0;
	font-size:12px;
	font-style:bold;
}
table.altrowstable td {
	border-width: 1px;
	
	border-style: solid;
	border-color: #a9c6c9;
}
</style>

Thanks
Sean

[apeg]

WOW thats some intense code for just Zebra striping...

Obviously you've done a chuck of working rigging this up, but you may want to look into this method. it will keep things a lot cleaner for you so down the line changes can be made in no time.

-aPeg