动态添加表格行后突出显示表格行 [英] highlight table row after dynamically adding it

问题描述

查看在用jquery动态添加表行后如何突出显示表行 我的代码似乎没有问题地添加行，但是没有突出显示正确的行

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.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

推荐答案

我认为效果将应用于tr:last，因为它是主要选择器.

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

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

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 -以上代码的有效DEMO

---

DEMO - Working DEMO of above code

这篇关于动态添加表格行后突出显示表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！