Question

Hope my title is not too confusing. Please let me know if there is a better way to title my problem.
I have jQuery function applying background-color to the odd rows in a table and on hover change the color to red. But if I edit the table dynamically my jQuery does not work any more.

I read a lot about JS event delegation and could not find any information about how to make this work without having actual event…

$(document).ready(function(){
    //add background-color to all odd rows
    //very important!!!
    $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");
    //change color on hover 
    //less important!!!     
    $("#tab3 tbody tr").hover(
      function () {
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
      }
    );
});

Is there a way to make it work after I edit the table.

EDIT:
This must work on IE8

Answer 1

use jQuery delegate on the table that will work even if you update the table rows dynamically because the event is attached to table and not each rows of it.

$(document).ready(function(){
    $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");


    $("#tab3").delegate('tbody tr', 'hover', function(){
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
    });
});

If you are updating the whole table dynamically then use this

$(document).delegate('#tab3 tbody tr', 'hover', function(){
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
 });

You can set the background color of odd row with simple css

#tab3 tbody tr:nth-child(odd)
{ 
   background: #DCF1FD; 
}