jQuery 从表中删除

【问题标题】：jQuery Delete From TablejQuery 从表中删除
【发布时间】：2019-03-26 11:06:00
【问题描述】：

此代码执行以下操作：

  • 点击项目行中的“删除” -> 删除项目行
  • 点击类别行中的“删除” -> 删除类别行和所有项目行（在所有表中）

需要它来做以下事情：

  • 点击项目行中的“删除” -> 删除项目行（完美运行）
  • 点击类别行中的“删除” -> 删除类别行和该类别行内的所有项目（还可以使用）

现场演示：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>

【问题讨论】：

  • 第二行内带有“类别”类的按钮在哪里？我只看到带有文本“删除不可见”的 元素？
  • 你能描述得更详细一点吗？这个问题非常令人困惑。
  • 丹，请看看我的代码是否满足您的需求。如果没有，请告诉我需要进行哪些更改。

标签： jquery html-table row


【解决方案1】：

你能改变 HTML 吗？

如果 HTML 对每个类别使用 &lt;tbody&gt; 标记，jQuery 会更容易（并且 HTML 更具描述性），如下所示：

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

【讨论】：

    【解决方案2】： 
    $("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();
});

    【讨论】：

      【解决方案3】：

      不知道您使用的是什么 jQuery 版本，或者您是否正在使用 IE 进行测试，但是使用 fadeIn/fadeOut 的 jQuery 1.3.2 存在一个错误，可能会导致问题：

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

      不知道这是否是问题所在，但我想我会提到它。

      【讨论】：

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode