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')将始终为TR，其中＆＃34; Section-A＆＃34; （或-B，-C，取决于点击的图标）。这意味着每个新TR将插入高于之前的TR，因此它必须始终是必须具有row_separator类的第一个新TR。 / p>

如果我认为的所有内容都是正确的，我只会检查是否$(this).closest('tr').hasClass('row_separator')，如果是，我会在其上调用removeClass并在新元素上调用addClass（或者包括像你一样在字符串中的类）。如果没有，我也不会。

如果 - 另一方面 - 您希望在之前的新TR之后插入新TR ，您可以为具有图标的TR添加一些特殊类并调用$(this).closest('tr').nextUntil('distinctive_class').last().after(newTr); < / p>

另请注意，如果您在A部分，B部分和C部分之后添加了一些新的TR并且调用$('.new_row').removeClass('new_row');，那么它将从每个.new_row删除不仅来自TR之后的TR {点击图标。

JQUERY：将Class保留在最后添加的元素中，并从TABLE

2 个答案: