Question

这是Fiddle Example（已更新）通过AJAX向tablesorter添加额外行

我尝试添加一项功能，允许用户在点击时添加和删除相同的元素之间切换。就像你点击A类一样，如果它没有存在于表中，它将被添加到表中，如果存在，则删除并返回false。我想出了这个代码来检查按钮的数据属性是否与行的类相匹配，因为它使用来自他们自己的JSON文件的item.title。

$('.area button').click(function(){
var dataterm = $(this).data('term');
    if($('.tablesorter tbody tr.'+dataterm).length)
    {   
        return false;
        $('.tablesorter tbody tr.'+dataterm).remove();
    }

但它不起作用。谁能告诉我怎么做？

var ajax_request;
function add_Data() {
    $('.area button').click(function(){
        var dataterm = $(this).data('term');
        if($('.tablesorter tbody tr.'+dataterm).length)
        {   
            return false;
            $('.tablesorter tbody tr.'+dataterm).remove();
        }

        var source = $(this).data('feed');

        $.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="'+title+' trremove lastadded' + $(".tablesorter tr.trremove").length + '"><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();

$('.undo').click(function(){ 
    $('.lastadded' + ($(".tablesorter tr.trremove").length - 2)).remove();
});


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

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

HTML

<div class="area"><button data-term="A">Class A</button></div>
<div class="area"><button data-term="C">Class C</button></div>
<div class="area"><button data-term="D">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

在找到的行上执行return false方法之前，您有一个.remove()。

应该是

if($('.tablesorter tbody tr.'+dataterm).length)
{   
    $('.tablesorter tbody tr.'+dataterm).remove();
} else {
    ...
}

这是update to your Fiddle。

在添加和删除元素之间切换

1 个答案: