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/