supprimer une ligne en cliquant sur un td spécifique de cette ligne par jquery

Question

J'ai une table

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

Maintenant je veux supprimer n'importe quelle ligne en cliquant sur X de chaque rangée, sauf la première et la dernière, et aussi besoin de confirmer avant la suppression.

J'ai utilisé le jquery ci-dessous

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

Cela fonctionne parfaitement, mais il s'exécute par un clic sur cette ligne (c'est-à-dire n'importe quel td), je veux que cet événement ne se produise que lorsque l'utilisateur clique sur X (troisième td) . S'il vous plaît, suggérez-moi comment modifier ce jquery pour que l'événement se produise au clic de X.

UPDATE : Je veux qu'il y ait au moins une ligne dans le tbody, Cela signifie que s'il n'y a qu'une seule ligne, il n'y a pas de fonction pour supprimer cette ligne, et s'il y a plusieurs lignes, il est possible de supprimer n'importe quelle ligne, mais pas toutes les lignes.

Answer 1

Je n'ai pas mis en œuvre toute votre logique d'animation et d'AJAX, mais voici comment vous pourriez procéder en général :

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

Aussi, je vous recommande fortement d'exécuter votre code à travers JSLint . L'échantillon de code que vous avez posté comporte un nombre considérable d'erreurs.

Answer 2

Vous pouvez le faire avec un peu moins de code comme ceci :

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();
    });
});​

Ceci attache un gestionnaire d'événement pour la table au lieu de 1 par <td> . D'abord, nous vérifions s'il reste des frères et sœurs qui ne sont pas supprimés (empêcher la dernière suppression). Ensuite, on vérifie s'ils confirment, puis on supprime la ligne.

Vous avez également besoin de quelques corrections html basées sur la question postée. La dernière balise doit être </table> au lieu de <table> et ceux <td> éléments dans le <thead> doivent être enveloppés dans <tr></tr> . Faites-moi savoir si vous avez des problèmes, vous pouvez voir une démo de ce système ici .

Answer 3

Essayez ceci :

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