删除元素，如果最后

Question

我不知道这甚至有可能，但我们会看到......

我有一个表：

<table cellspacing="0" class="stripey"> 
      <thead> 
       <tr> 
        <td class="center"></td> 
        <td>Plan Name</td> 
        <td class="options">Options</td> 
       </tr> 
      </thead> 
      <tbody> 
       <?php 
       foreach ($result as $row) { 
       ?> 
       <tr class="<?php echo alternator('', 'odd'); ?>" id="record-<?php echo $row['id'];?>"> 
        <td class="center"></td> 
        <td><?php echo $row['name']; ?></td> 
        <td class="options"><img src="<?php echo base_url();?>inc/images/search.png"> <img src="<?php echo base_url();?>inc/images/pencil.png"> <a href="#" class="delete" title="delete"><img src="<?php echo base_url();?>inc/images/delete.png"></a></td> 
       </tr> 
       <?php 
       } 
       ?> 
      </tbody> 
     </table> 

，你可以看到，<tr>重复然而，对于许多在$result ...但我有一个形象让我删除的项目，所以，我写道：

$('a.delete').click(function() { 
    var parent = $(this).parents("tr:first"); 
    $.ajax({ 
     type: 'get', 
     url: '/plans/delete', 
     data: 'id='+ parent.attr('id').replace('record-', ''), 
     beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function(msg) { 
      parent.children('td').wrapInner('<div>'); 
      parent.children('td').children('div').slideUp(500,function() { 
      parent.remove(); 
      $('.stripey tr').removeClass('odd'); 
      $('.stripey tr:even').addClass('odd'); 

      }); 
     } 
    }); 
    return false;  
}); 

现在我想知道是什么，是如果有可能以某种方式告诉如何很多tr项目有tbody，所以如果有0，我可以用文本替换整个表格，说明没有。

Answer 1

您可以使用jQuery的DOM对象的length属性...

if($('table.stripey tbody tr').length == 0) { 
    // do something 
} 

Answer 2

您可以使用下面的行来获取定位符click事件处理程序中trs的总数。

var totalNoOfTrs = $(this).closest("tbody").children().length; 

$('a.delete').click(function() { 
    var parent = $(this).parents("tr:first"); 
    var $tr = $(this).closest("tr"); 
    $.ajax({ 
     type: 'post', 
     url: '/plans/delete', 
     data: 'id='+ parent.attr('id').replace('record-', ''), 
     beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function(msg) { 
      var $tbody = $tr.closest("tbody"); 
      $tr.remove(); 
      if($tbody.children().length > 0){ 
       $('.stripey tr').removeClass('odd'); 
       $('.stripey tr:even').addClass('odd'); 
      } 
      else{ 
       //Replace the table with appropriate message. 
       $('.stripey').replaceWith("<div>No rows to delete</div>"); 
      } 

     } 
    }); 
    return false;  
}); 

在上面的代码this指向锚定元件与class删除和最接近的tbody会给包含所有TRS然后TBODY的children()将给在其中的所有元件TR tbody元素。

Answer 3

您可以检查tbody的children的length：

if($("tbody").children().length) { 
    console.log("There is still at least one row."); 
}else{ 
    console.log("There are no more rows."); 
}