table highlights only in tbody

Question

Hi Guys, first post...

I have several pages to do with several table on each page. I've got the JQUERY to do zebra stripes on even lines and change colour on hover. but, here it comes, it changes colour on THEAD and TFOOT and i can't apply css to TFOOT to change colour.

Thanks very much in advance.... here's the code

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
$(document).ready(function() {
    $(function() {
        $('tr').hover(function() {
            $(this).css('background-color', '#FFFF99');
        },
        function() {
            $(this).css('background-color', '');
        });
    });
});

$(function() {
    $("table.tiger-stripe tr:odd").addClass("oddrow");
});
</script>

Answer 1

apply the striping to table tbody only

$(function() { 
    $('table.tiger-stripe tbody tr').hover(
        function() { $(this).css('background-color','#FFFF99'); }, 
        function() { $(this).css('background-color', '#000000');}

    );       
    $("table.tiger-stripe tbody tr:odd").addClass("oddrow");  
 });

Answer 2

Please can we see your code for a table? Are you sure there is more than one tr row in the tfoot because :odd will only trigger on alternate rows so a minimum of two rows must be present.

Oh did you mean that you didn't want tfoot to trigger?

In that case just use $('tbody tr:odd') as your selector.

Answer 3

Thanks everyone....

here's what the code looks like to do it ....

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;
</script><script type="text/javascript">
$(function() {
        $('table.tiger-stripe tbody tr').hover(
       function() { $(this).css('background-    color','#FFFF99'); },
       function() { $(this).css('background-    color', '');}    );
        $("table.tiger-stripe tbody tr:nth-child(even)").addClass    ("oddrow");   });

</script>