JQUERY：將類放在最後添加的元素中，並從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

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

如果所有的東西我認爲是正確的，我只想檢查是否$(this).closest('tr').hasClass('row_separator')，如果是這樣，我想（像你一樣或包含類的字符串）調用新的元素上removeClass它並addClass。如果不是，我也不會。

如果 - 從另一方面 - 你想上一新的TR後插入新的TR ，你可以添加一些獨特的類的紅素具有圖標，並呼籲$(this).closest('tr').nextUntil('distinctive_class').last().after(newTr);

另外要注意，如果你已經在Section-A，B和C之後添加了一些新的TR，並且打電話給$('.new_row').removeClass('new_row');它不僅會從每個.new_row中刪除類，而且還會從點擊該圖標的TR之後刪除類。

Answer 2

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