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!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Applying table row colors on mouseover with jQuery ?

Status
Not open for further replies.

c0deM0nK424

Programmer
Oct 28, 2007
126
0
0
GB
okay folks - been playing around with jQuery last few weeks, pretty cool extension of javascript.


first of all - i want you to visualise what i'm doing, refer to screenshot below.



those two main boxes, are basicaly two DIV classes (call them div 1 and div 2 for simplicity if u wish)

and those forms on both divs fire php scripts, 2 of which are on a server (the add and delete ones)

the view consultants - the php script appears inside the first div itself - havent been bothered to change that just yet.

the consultant names are in a table called consultants, which reside in a mysql database.

i managed to style my php output somewhat, that being - i just wanted the output to be of font-family:"calibri" heh.

here goes - the problem is i want to apply a mouseover and mouseout effect.

i managed to get the alternate row colors working
but the mouseover/out thing wont work.

in my stylesheet i have this code that works with jQuery.

tr:nth-child(odd) { background-color:#EBECE4; }
tr:nth-child(even) { background-color:#FCF6CF; }


.over{ background-color:white; }


and in my main consultants.htm page, i have called the jquery script etc and have this code:

<html>
<title>Consultancy Profiling Tool - Admin</title>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()) {

$("tr.nth-child(even)").addClass("even");

});



$("tr").mouseover(function(){
$(this).addclass("over");

});

$("tr").mouseout(function(){

$(this).removeclass("over");
});

</script>
<link rel="stylesheet" type="text/css" href="abc.css"/>
</head>


So why won't the mouseover effect work ?


im stumped. if u guys can point me in the right direction or tell me what im doing wrong/ or not doing - that'd be great.

consultants.htm code

positioning.css code
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top