If I place my jQuery at the end of the body without $(document).ready(function() , it works fine. If I place it in the head using $(document).ready(function(), it no longer works. I realized I needed the function() when placing jQuery in the head from here, but when I try to implement it myself, no dice. I’ve stared at it too long, I’m not seeing the problem.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#testTable tr").hover(
function(){$(this).addClass("highlighted");},
function(){$(this).removeClass("highlighted");}
);
});
</script>
<style type='text/css'>
.tablerow {background-color:yellow;}
.tableheader {background-color:Pink;}
.highlighted {background-color:Green;}
</style>
</head>
<body>
<table id="testTable">
<thead class="tableheader">
<tr><th>No</th><th>Name</th><th>Age</th><th>Salary</th></tr>
</thead>
<tbody id="testBody">
<tr class="tablerow"><td>1</td><td>Yong Mook Kim</td><td>28</td><td>$100,000</td></tr>
<tr class="tablerow"><td>2</td><td>Low Yin Fong</td><td>29</td><td>$90,000</td></tr>
</tbody>
</table>
</body>
try referencing the css document before the script , here is the documentation http://api.jquery.com/ready/