Row highlighting with Jquery

Question

Hi,
I heard a lot of good things about Jquery. I was trying to see for myself how to get Jquery to work with APEX. I've this sample code snippet that does row highlighting when hovering over a table row. The code works as a html file but I can't seem to get it to work with APEX. Here's the procedure I follow in APEX:
1. Uploaded the jquery library into APEX workspace.
2. Modify the page template to include the jquery library. I had rename the jquery library to "jqmin_126.hs"
<script src="#APP_IMAGES#jqmin_126.js" type="text/javascript"></script>
3. Added the code snippet to the html header of APEX report page.
<style type="text/css">
.highlight {
background-color: #FC6 !important;
</style>
<script type="text/javascript">
$(document).ready(function( ) {
$('table.default1 tbody tr').mouseover(function() {
$(this).addClass('highlight');
$(this).css('cursor','pointer');
}).mouseout(function() {
$(this).removeClass('highlight');
</script>
To keep things simple, I used the following APEX settings:
Template: Reports region
Report template: Default: Look 1
Version of APEX : 3.1.2
My interest here is mostly trying to see how jquery works with APEX and not so much the row highlighting. What am I missing?
Thanks in advance.

Answer 1

I ran into this problem as well. What happened to me is that the style associated for the TD tag was overwriting the style for the TR tag. So even though I was adding and removing classes to the TR the page would not reflect the changes.
I would first make sure the Jquery is working by adding the following to my header section.
$(document).ready(function( ) {
  alert('Jquery is working');
});If it is working I would try adding .find("td") to edit the CSS of each table data thus changing the background of the row.
<script type="text/javascript">
  $(document).ready(function( ) {
    $('table.default1 tbody tr').mouseover(function() {
      $(this).find("td").addClass('highlight');
      $(this).find("td").css('cursor','pointer');
    }).mouseout(function() {
      $(this).find("td").removeClass('highlight');
</script>Hope this can point you in the right direction.
Tyson
Edited by: Tyson Jouglet on Nov 24, 2008 9:31 AM