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 jquery ``` $('#opponents tr:last').after('datamore data').effect("highlight", {}, 3000); ``` haml/table ``` %table.twelve#opponents %thead %tr %th Name %th Manager %tbody - @opponents.each do |opponent| %tr %td= opponent.name %td.span1 - if can? :update, @opponent .btn-group %button.btn.dropdown-toggle{"data-toggle" => "dropdown"} %i.icon-pencil Manage %span.caret %ul.dropdown-menu %li= link_to "Edit #{opponent.name}", "#modalOpponent" -if can? :manage, @opponent %li.divider %li= link_to "Delete #{opponent.name}", opponent, :method => :delete, :remote => :true, :confirm => true ```

Accepted Answer

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 = $('datamore data'); $('#opponents tr:last').after($newRow); $newRow.effect("highlight", {}, 3000); ``` DEMO - Working DEMO of above code

highlight table row after dynamically adding it

Solution

Problem