Question

我有一张桌子

<table class="oldService">
    <thead>
           <th>name</th>
           <th>age</th>
           <th>action</th>
    </thead>    
    <tbody>
    <?php foreach($array as $k=>$v){ ?>       
          <tr>
              <td><?php echo $k[name] ?></td>
              <td><?php echo $k[age]?></td>
              <td id="<?php $k[id]" class="delme">X</td>
          </tr>
    <?php } ?>        
    </tbody>
<table>

现在我想通过点击除第一行和最后一行之外的每行的 X 来删除任何行，并且还需要在删除前确认。

我在jquery下面使用

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('table.oldService>tbody tr').not(':first').not(':last').click(function(){
    if(confirm('want to delete!')){
    jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() { 
            jQuery(this).remove()}));
    jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
    }
    else return false;});
});

</script>

这是完美的，但它通过点击该行（意味着任何td）执行，我希望此事件仅在用户点击 X （第三个td）时出现。请建议我如何修改此jquery，以便在点击X时发生事件。

更新我希望最少一行应该在tbody中，表示如果只有一行，则没有删除该行的函数，如果有多行，则可以删除任何行，但不能删除所有行。

Answer 1

我没有实现你所有的动画和AJAX逻辑，但是通常你可以这样做：

$(function() {
    $('table.oldService td.delme:not(:first):not(:last)').click(function() {
       $(this).closest('tr').remove(); 
    });
});

此外，我强烈建议您通过JSLint运行代码。您发布的代码示例中包含大量错误。

Answer 2

您可以使用这样的代码来执行此操作：

jQuery('table.oldService').delegate('td.delme', 'click', function() {
    if(jQuery(this).parent().siblings(":not(.del)").length === 0) return;
    if(!confirm('want to delete!')) return;

    jQuery.get('deleteService.php', { id:this.id });
    jQuery(this).parent().addClass('del').fadeTo(400, 0, function() {
        jQuery(this).remove();
    });
});

这会为表附加一个事件处理程序，而不是每<td>个1。首先，我们检查是否有任何未删除的兄弟姐妹（防止上次删除）。然后检查它们是否确认，然后删除该行。

您还需要根据发布的问题进行一些html修复。最后一个标记必须是</table>而不是<table>，而<td>中的<thead>元素需要包含在<tr></tr>中。如果您有任何问题，请告诉我you can see a working demo of this here。

Answer 3

试试这个：

    <script type="text/javascript">
        jQuery(document).ready(function(){
    jQuery('table.oldService>tbody tr img.delete').not(':first').not(':last').click(function () {
        if(confirm('want to delete!'))
        {
          jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() { 
                jQuery(this).parent().parent().remove()}));
          jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
        }
        else return false;});
    });
</script>

html：

<table class="oldService">
        <thead>
               <th>name</th>
               <th>age</th>
               <th>action</th>
        </thead>    
        <tbody>
        <?php foreach($array as $k=>$v){ ?>       
              <tr>
                  <td><?php echo $v['name'] ?></td>
                  <td><?php echo $v['age']?></td>
                  <td><img id="<?php echo $v['id']?>" class="delete" src="del.gif" /></td>
              </tr>
        <?php } ?>        
        </tbody>
<table>

通过jquery点击该行的特定td时删除行

3 个答案: