Jquery Supprimer du tableau

Ce code ne suit:Jquery Supprimer du tableau

Cliquez sur « Supprimer » au point ligne -> supprime l'article ligne
Cliquez sur « Supprimer » dans la catégorie rangée -> supprime la ligne de la catégorie et toutes les lignes d'articles (dans toutes les tables)

besoin pour faire ce qui suit:

Cliquez sur « Supprimer » dans la ligne de l'article -> supprimer la ligne de l'article (FONCTIONNE PARFAITEMENT)
Cliquez sur « Supprimer » dans la ligne de la catégorie -> supprimer la catégorie rangée et tous les éléments à l'intérieur de cette catégorie rangée (FONCTIONNE PAS ENCORE)

démonstration en direct: http://usercp.athensluna.net:81/mall_manager2/

Tableau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Go go Luna!</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" href="styles.css" /> 
     <script type="text/javascript" src="jquery.min.js"></script> 
     <script type="text/javascript" src="jquery.jeditable.js"></script> 
     <script type="text/javascript">           
      $(document).ready(function() { 
       $("tr.item .delete").click(function(){ 
        $.post("do.php", { what: "delete", q: $(this).attr("id") }); 
        $(this).parent().parent().fadeOut("fast"); 
       }); 

       $("tr.category a.delete").click(function(e){ 
        $(this).parent().parent().fadeOut("fast"); 
        $(this).parent().parent().nextAll("tr.item").fadeOut("fast"); 
       }); 

      }); 
     </script> 

    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"></div> 
      <div id="main"> 
<table class="stats" width="100%"> 
    <tr class="category"> 
     <td colspan="2">Costumes<br /><small>Make your character look uniqe</small></td> 
     <td width="80"><a href="#" class="delete" id="category:1">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:1:1">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:1:2">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:1:3">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:1:4">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:1:5">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="category"> 
     <td colspan="2">Costumes<br /><small>Make your character look uniqe</small></td> 
     <td width="80"><a href="#" class="delete" id="category:2">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:2:1">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:2:2">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="category"> 
     <td colspan="2">Costumes<br /><small>Make your character look uniqe</small></td> 
     <td width="80"><a href="#" class="delete" id="category:3">Delete</a><br />Invisible</td> 
    </tr> 
    <tr class="item"> 
     <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
     <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
     <td width="80"><a href="#" class="delete" id="item:3:1">Delete</a><br />Invisible</td> 
    </tr> 
</table> 
      </div> 
      <div id="footer">Template by <a href="http://danspd.com" target="_blank">DanSpd</a></div> 
     </div> 
    </body> 
</html>

Source

2009-12-23 DanSpd

où bouton à l'intérieur deuxième rangée avec classe « catégorie »? Je vois seulement élément avec le texte 'Supprimer Invisible'? –

Pouvez-vous être un peu plus descriptif? Cette question est très confuse. – Sampson

Dan, s'il vous plaît voir si mon code fait ce dont vous avez besoin. Sinon, faites-moi savoir quels changements doivent être faits. – Sampson

$("tr.category a.delete").click(function(e){ 

    e.preventDefault(); 

    // find the row 
    var $tr = $(this).parent("tr:first"); 

    // find the next row with class 'category' 
    var $nextcategory = $tr.next("tr.category"); 

    // select next 'item' rows after next of the next 'category' row 
    var $nextitemrows = $nextcategory.next('tr.category').nextAll('tr.item'); 

    // remove next 'item' rows before next of the next 'category' row 
    $nextcategory.nextAll("tr.item").not($nextitemrows).remove(); 

    // remove next category 
    $nextcategory.remove(); 
}); 


$("tr.item a.delete").click(function(e){ 

    e.preventDefault(); 

    // find the row & remove itself 
    $(this).parent("tr:first").remove(); 
});

Source

2009-12-23 07:16:38

Je ne sais pas quelle version jQuery que vous utilisez, ou si vous testez avec IE, mais il y a un bug avec jQuery 1.3.2 en utilisant fadeIn/fadeOut qui pourraient causer des problèmes:

http://dev.jquery.com/ticket/4440

Je ne sais pas si c'est le problème, mais je pensais que je le mentionnerais.

Source

2009-12-23 07:48:10 slolife

Pouvez-vous modifier le code HTML du tout?

Le jQuery serait plus facile (et le code HTML plus descriptif) si le code HTML utilisé une balise <tbody> pour chaque catégorie, comme ceci:

<table class="stats" width="100%"> 
    <tbody> 
     <tr class="category"> 
      <th scope="rowgroup" colspan="2">Costumes<br /><small>Make your character look uniqe</small></th> 
      <td width="80"><a href="#" class="delete" id="category:1">Delete</a><br />Invisible</td> 
     </tr> 
     <tr class="item"> 
      <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
      <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
      <td width="80"><a href="#" class="delete" id="item:1:1">Delete</a><br />Invisible</td> 
     </tr> 
     ... 
    </tbody> 
    <tbody> 
     <tr class="category"> 
      <th scope="rowgroup" colspan="2">Costumes<br /><small>Make your character look uniqe</small></th> 
      <td width="80"><a href="#" class="delete" id="category:2">Delete</a><br />Invisible</td> 
     </tr> 
     <tr class="item"> 
      <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td> 
      <td width="120">1000 Athen Coins<br />$1 Paypal</td> 
      <td width="80"><a href="#" class="delete" id="item:2:1">Delete</a><br />Invisible</td> 
     </tr> 
     ... 
    </tbody> 
</table>

Ensuite, votre jQuery pourrait être ré-écrit comme ceci:

<script type="text/javascript">           
      $(document).ready(function() { 
        $("tr.item .delete").click(function(){ 
          $.post("do.php", { what: "delete", q: $(this).attr("id") }); 
          $(this).parent().parent().fadeOut("fast"); 
        }); 

        $("tr.category a.delete").click(function(e){ 
          $(this).parents('tbody').fadeOut("fast"); 
        }); 

      }); 
    </script>

Source

2009-12-23 08:04:14

Répondre

Questions connexes