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('<tr><td>data</td><td>more data</td></tr>').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

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

---