JQuery Удалить из таблицы - PullRequest
Новая
       12

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

1 голос
/ 23 декабря 2009

Этот код выполняет следующие действия:

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

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

  • Нажмите «Удалить» в строке элемента -> удалить строку элемента (РАБОТАЕТ ОТЛИЧНО)
  • Нажмите «Удалить» в строке категории -> удалить строку категории и все элементы в этой строке категории (ДАЕТ РАБОТАЕТ)

Демонстрация в реальном времени: 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>

Ответы [ 3 ]

1 голос
/ 23 декабря 2009

Можете ли вы вообще изменить 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>
0 голосов
/ 23 декабря 2009

Не знаю, какую версию jQuery вы используете или тестируете ли вы с IE, но есть ошибка в jQuery 1.3.2 с использованием fadeIn / fadeOut, которая может вызывать проблемы:

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

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

0 голосов
/ 23 декабря 2009 
$("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();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...