Jquery Удалить из таблицы

Этот код делает следующее:Jquery Удалить из таблицы

Нажмите на кнопку «Удалить» в пункте строки -> удаляет элемент строки
Нажмите на «Удалить» в категории подряд -> удаляет категорию строки и все строки (пункт во всей таблице)

нужно это сделать следующее:

Нажмите на кнопку «Удалить» в пункте строки -> Удалить элемент строки (работает отменно)
Нажмите на «Удалить» в категории строки -> удалить категорию строки и все элементы внутри этой категории ряд (ДЕЛАЕТ РАБОТЫ ПОКА)

Живая демонстрация: http://usercp.athensluna.net:81/mall_manager2/

Таблица:

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

источник

2009-12-23 DanSpd

где кнопка внутри второй строки с классом «категория»? Я вижу только элемент с текстом «Удалить невидимый»? –

Можете ли вы быть более наглядным? Этот вопрос очень запутан. – Sampson

Дэн, посмотри, делает ли мой код то, что тебе нужно. Если нет, сообщите мне, какие изменения необходимо внести. – 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(); 
});

источник

2009-12-23 07:16:38

Не знаю, что JQuery версию вы используете, или если вы тестируете с IE, но есть ошибка с JQuery 1.3.2 с помощью FadeIn/Затухание, которые могут быть причиной проблем:

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

Не знаю, если это проблема, но подумал, что я бы сказал об этом.

источник

2009-12-23 07:48:10 slolife

Вы вообще не можете изменить HTML?

JQuery будет проще (и HTML более описательный), если HTML использовали <tbody> тег для каждой категории, например:

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

Тогда ваш Jquery может быть переписан так:

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

источник

2009-12-23 08:04:14

Jquery Удалить из таблицы

ответ

Смежные вопросы