jquery - 动态添加后突出显示表行

Question

查看如何在使用 jquery 动态添加表格行后突出显示我的代码似乎可以毫无问题地添加该行，但它没有突出显示正确的行

jQuery

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

火腿/桌子

%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

我会假设该效果将应用于tr:last主要选择器。

after()从原始选择器返回 jQuery 对象，$('#opponents tr:last')允许您继续链接到该主选择器。

---

演示- 使用现有代码，突出显示错误的行

---

尝试将新行分离成自己的行，然后直接对其应用效果。与此类似：

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

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

---

DEMO - 上述代码的工作演示

---

Answer 2

您必须在效果中添加 css，如下所示：

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