...

View Full Version : how to change a table row bg, without any js in the table?



emehrkay
01-25-2006, 02:39 PM
like onmouseover or onmouseout calling a function. we're not allowed toput any js in the page because it interferes with those reading aides or something.

i tried adding an eventListener, of course it worked perfectly in firefox, but ie doesnt support that.

any ideas? this is driving me crazy. thanks

SpirtOfGrandeur
01-25-2006, 02:48 PM
Whats wrong with running some JS after the table is created and setting each box to have its proper onmouseover, onmouseout events!

emehrkay
01-25-2006, 02:49 PM
something to do with 508 standards

Kor
01-25-2006, 02:55 PM
You may attach dinamically the events onload using DOM1 level methods. Put this code in HEAD. make sure you have no other onload whithin the page. Chose your own collors for rollover...


<script type="text/javascript">
var coloff='#ffffff';//roll off color
var colon='#e5e5e5';//roll on collor
onload=function(){
var allCells = document.getElementById('mytable').getElementsByTagName('td');
for(var i=0;i<allCells.length;i++){
allCells[i].onmouseover=function(){
this.style.background=colon;
}
allCells[i].onmouseout=function(){
this.style.background=coloff;
}
}
}
</script>

If you can not modify the content (to give table an id) you may use the index of the table (count the index of your table from top to bottom)

var allCells = document.getElementsByTagName('table')[0].getElementsByTagName('td');
if it is first
var allCells = document.getElementsByTagName('table')[1].getElementsByTagName('td');
if second.... and so on

emehrkay
01-25-2006, 02:59 PM
wow thats just like the litener that i set up, ill try it out and let you know. thanks

emehrkay
01-25-2006, 03:12 PM
thank you that worked great!!!! this should be a stickey somewhere. i just modified the code to ignore the title row, change the className isnted of the bg and change the whole row's class.

thanks again

Kor
01-25-2006, 03:18 PM
thank you that worked great!!!! this should be a stickey somewhere. i just modified the code to ignore the title row, change the className isnted of the bg and change the whole row's class.

thanks again
You should have something like:


<script type="text/javascript">
var coff='classoff';//roll off classname
var con='classon';//roll on classname
onload=function(){
var aRow = document.getElementById('mytable').getElementsByTagName('tr');
for(var i=0;i<aRow.length;i++){
aRow[i].onmouseover=function(){
this.className=con;
}
aRow[i].onmouseout=function(){
this.className=coff;
}
}
}
</script>

emehrkay
01-27-2006, 10:14 PM
cool thanks a lot, thats what i did. could i add more functions to the onload event?

Kor
02-03-2006, 02:34 PM
You may add as many functions as you want



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum