代码之家 › 专栏 › 技术社区 › xkeshav

单击jquery删除该行的特定td

jquery php

xkeshav · 技术社区 · 14 年前

我有一张桌子

<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时发生事件。

更新: 我想至少有一排在车身上, 意味着如果只有一行,则没有函数删除该行;如果有多行,则可以删除任何行,但不能删除所有行。

3 回复 | 直到 14 年前

Nick Craver 14 年前

你可以用更少的代码来实现这一点,比如:

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> . 首先,我们检查是否还有未删除的兄弟姐妹(防止最后删除)。然后检查它们是否确认,然后删除行。

您还需要一些基于发布的问题的html修复。最后一个标签必须是 </table> 而不是 <table> 以及那些 <TD & GT; 中的元素 <thead> 需要包裹 <tr></tr> . 如果你有什么麻烦告诉我, you can see a working demo of this here .

jitter 14 年前

我没有实现您的所有动画和ajax逻辑,但以下是您通常可以实现的方法:

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

另外,我强烈建议您运行代码 JSLint . 您发布的代码示例中有大量错误。

Bader 14 年前

试试这个:

    <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>