JQUERY：將Class保留在最后添加的元素中，並從TABLE中所有其他新添加的元素中刪除

Question

如果單擊該圖標，則在每個TR中都有一個表格和一個新TR附加到末尾。 TR還具有row_seperator類。 我希望將此row_seperator從先前所有新追加的行中刪除，但保留在最后追加的行TR中。

$(this).closest('tr').removeClass("row_seperator") ;      
$('.new_row').removeClass('row_seperator').removeClass('new_row');
$('<tr class="row_seperator new_row"><td colspan="8">new td</td></tr>').insertAfter($(this).closest('tr'));

如下圖所示。 我希望這兩條交叉的線消失而最后一行保持不變。 這樣每個部分都有一條線將其與其他部分分開。

Answer 1

    <table class="authors-list">
       <tr class="row_seperator">
          <td>Column 1</td>
          <td>Column 2</td>
       </tr>
       <tr class="row_seperator">
          <td><input type="text" name="first_name" /></td>
          <td><input type="text" name="last_name" /></td>
       </tr>
    </table>
    <a href="#" title="" class="add-author">Add</a>


// Jquery Code


        var counter = 1;
        $('a.add-author').click(function(event){
            event.preventDefault();
            counter++;
            $(".authors-list tr").addClass("row_seperator");
            var newRow = jQuery('<tr><td><input type="text" name="first_name' +
                counter + '"/></td><td><input type="text" name="last_name' +
                counter + '"/></td></tr>');
            $('table.authors-list').append(newRow);
        });

工作小提琴http://jsfiddle.net/yUfhL/1097/

Answer 2

我想this是指單擊的圖標。 在這種情況下， $(this).closest('tr')將始終是帶有“ Section-A”（或-B，-C，取決於單擊哪個圖標）的TR。 這意味着每個新的TR將插入到先前的TR 之上 ，因此它將始終是第一個必須具有row_separator類的新TR。

如果我假設的所有內容都正確，那么我只需檢查$(this).closest('tr').hasClass('row_separator') ，如果是，我就可以在其上調用removeClass並在新元素上調用addClass （或像在字符串中那樣包含類。 如果沒有，我什么都不做。

另一方面-如果您想在先前的新TR 之后插入新的TR ，則可以向具有圖標的TR添加一些獨特的類，然后調用$(this).closest('tr').nextUntil('distinctive_class').last().after(newTr);

還應注意，如果您在A節，B節和C節之后添加了一些新的TR，並調用$('.new_row').removeClass('new_row'); 它將不僅從單擊圖標的TR之后的類中刪除每個.new_row中的類。