highlight table row after dynamically adding it

Question

looking at how i can highlight a table row after dynamically adding it with jquery my code seems to be adding the row with no problems, but its not highlighting the correct row<

Answer 1

I would assume that the effect would be applied to what ever tr:last was as that is the main selector.

after() returns the jQuery object from the original selector $('#opponents tr:last') allowing you to continue chaining on to that main selector.

---

DEMO - Using existing code, wrong row is highlighted

---

Try separating the new row into it's own instead and applying the effect to it directly. Similar to this:

var $newRow = $('<tr><td>data</td><td>more data</td></tr>');

$('#opponents tr:last').after($newRow);
$newRow.effect("highlight", {}, 3000);

---

DEMO - Working DEMO of above code

---

Answer 2

You have to add css in effects like follow:

$('#opponents tr:last').after('<tr><td>data</td><td>more data</td></tr>').effect("highlight", {color:'#ff0000'}, 3000);