Question

Updated Example

我想使用带有过滤器和粘贴标头插件的tablesorter通过AJAX将额外的行添加到表中。我可以通过向它们添加一个类并使用$('.row_selector').empty();来删除所有AJAX行。但我希望有另一个按钮，只删除以前添加的行。有没有办法做到这一点？

我这样做没有成功：

$('.undo').click(function(){ 
    if ($('.tablesorter tbody tr').length > 1)
        {
           $(this).closest('tr').empty();               
        }; 
});

jQuery的：

$('.undo').click(function(){  //Remove previously added row
    if ($('.tablesorter tbody tr').length > 1)
        {
           $(this).closest('tr').empty();               
        }; 
});

$('.remove').click(function(){

    $('.trremove').empty();
    $(".tablesorter").trigger("update");
});

var ajax_request;
function add_Data() {
    $('.area button').click(function(){
    var colspan = $("table.tablesorter tbody tr").length;
            console.log(colspan);
            if(colspan > 10)
            {
                alert("Too Many Rows");
                return false;
            }
          var source = $(this).data('feed');
          if(typeof ajax_request !== 'undefined')
        ajax_request.abort();
        ajax_request =   
        $.ajax({
    url: source,
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
         var title = item.title,
          year = item.year, 
          job = item.Job,
          education = item.Education,
          background = item.Background,
          ingredient = item.Ingredient;
         $(".tablesorter tbody").append('<tr style="display:table-row;" class="trremove"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

         });
        },
    });
          $("table").trigger("update"); 

            var sorting = [[2,1],[0,0]]; 
            $(".tablesorter").trigger("sorton",[sorting]); 
        }); 
        return false; 
};

add_Data();

HTML：

<button class="undo">Remove Previous</button>
<button class="remove">Remove</button>
<div class="area"><button>Class B</button></div>
<div class="area"><button>Class C</button></div>
<div class="area"><button>Class D</button></div>


<table class="tablesorter" cellspacing="1">
<thead>
  <tr>
   <th style="visibility:hidden;">first name</th> 
   <th>first name</th>
   <th>last name</th>
   <th>age</th>
   <th>total</th>
   <th>discount</th>
   <th>date</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Answer 1

如果要从表中删除最后一行，可以尝试以下操作：

$('.undo').click(function(){ 
 if ($('.tablesorter tbody tr').length > 1)
    {
       $('.tablesorter tbody tr:last').remove();               
    }; 
});

Answer 2

由于你有一个分拣机，我的全局变量lastAdded，然后在你的ajax调用中你可以设置它在你的成功函数中这样做：

lastAdded = $('<tr style="display:table-row;" class="trremove"></tr>').html('<td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td>');
$(".tablesorter tbody").append(lasstAdded);

然后在你的撤消中你可以使用

if (lastAdded != null) {
    lastAdded.remove();
}

Updated fiddle as example (doesn't work as original doesn't work - just to show code)

如果您不想要全局课程，可以尝试使用额外的课程：

在你的成功中：

 $('.lastadded').removeClass('lastadded');
 $(".tablesorter tbody").append('<tr style="display:table-row;" class="trremove lastadded"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

在撤消

中

$('.lastadded').remove();

Example

在jQuery中删除以前添加的元素

2 个答案: