How do I add a mouseover event on a row in jquery?

Question

I have a dynamically populating table and would like to add a mouseover feature

(mouseover="style.backgroundColor='#E1EBF4'") 

to my table row while the data row is being added.

function addRecentData(data) {
   $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>');
   var $tr = $('#newTable tr:last');
   $tr.find('.name').html(data.Name);
   $tr.find('.id').html(data.Id);
}

Answer 1

EDIT: Note that if you're not concerned about IE6 support, you could use the CSS :hover pseudo selector to change the background. This should probably be the first consideration.

#newTable ​tr:hover {
    background: #E1EBF4;
}​

---

Given your current code, you could just use your $tr reference to the table:

function addRecentData(data) {
   $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>');
   var $tr = $('#newTable tr:last');
   $tr.find('.name').html(data.Name);
   $tr.find('.id').html(data.Id);
   $tr.mouseover(function() {
       $(this).css('backgroundColor','#E1EBF4');
       // this.style.backgroundColor = '#E1EBF4';  // or you could do this
   });
}

Another approach would be to use inserAfter() instead of after(), and assign the variable immediately.

function addRecentData(data) {
   var $tr = $('<tr><td class="name"></td><td class="id"></td></tr>')
                   .insertAfter('#newTable tr:last');
   $tr.find('.name').html(data.Name);
   $tr.find('.id').html(data.Id);
   $tr.mouseover(function() {
       $(this).css('backgroundColor','#E1EBF4');
       // this.style.backgroundColor = '#E1EBF4';  // or you could do this
   });
}

Or if each <tr> should get the mouseover, you could use .delegate() on the #newTable to take care of the mouseover.

$('#newTable').delegate('tr', 'mouseover', function() {
    $(this).css('backgroundColor','#E1EBF4');
    // this.style.backgroundColor = '#E1EBF4';  // or you could do this
});

Now <tr> elements will automatically get the functionality you want when they are added to the table.

• http://api.jquery.com/delegate/

Answer 2

You should stick to adding your events via jQuery. You can put the event handler in place before adding your rows by using the .live() event binding method. Also, if you want a hover effect, you're better off with mouseenter and mouseleave, which jQuery provides for browsers that don't already support it:

$('#newTable tr').live('mouseenter', function () {
    $(this).css('backgroundColor', '#E1EBF4');
}).live('mouseleave', function () {
    $(this).css('backgroundColor', '');
});

This is also more efficient than binding to each individual element when it is added dynamically.

Answer 3

As stated before you can use .live

$('#newTable tr').live('mouseenter', function() {
  $(this).css('background','#E1EBF4');
}).live('mouseleave', function() {
  $(this).css('background','');
});

Be sure you are using mouseenter and mouseleave on the row, not mouseover/mouseout or it will trigger when moving in and out of child elements as well and you will see a flicker of your background changing back and forth.