Question

从表中删除行时遇到问题。我有2个表，一个要求我删除X行数，所以我使用了jquery.each，在每个循环中我只是去了$（value）.remove（）并且它可以工作。

现在我有另一个表，用户一次删除一行。所以我想我会做同样的事情。

('#MyTable tbody tr td img:even').click(function()
{
    // check if they are sure if they want to delete. If true go on

    // now get this row they clicked on
    var row = $('#MyTable tbody tr td img:even').parents('tr');

   // do some ajax stuff
   $(row).remove();
});

所以我认为这样可行，因为它类似于我对jquery循环所做的。我通过警告（$（row）.html（））检查了“行”中的内容。

这会产生我想要删除的问题行。我在jquery每个循环（我有的表）中做了同样的事情来“重视”。它还包含要删除的行。

所以对我来说这两者都是一样的，因为它们都吐了一个表行。但是jquery循环中的那个可以工作。

“行”方式不在哪里。它会删除表中的所有行。

我不明白为什么......

由于

这里是编辑表。我认为正是这个jquery警报插件正在杀死“这个”

在这里找到http://abeautifulsite.net/notebook/87

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
        #popup_container
        {
            font-family: Arial, sans-serif;
            font-size: 12px;
            min-width: 300px; /* Dialog will be no smaller than this */
            max-width: 600px; /* Dialog will wrap after this width */
            background: #FFF;
            border: solid 5px #999;
            color: #000;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
        #popup_title
        {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            line-height: 1.75em;
            color: #666;
            background: #CCC url(Images/Alerts/title.gif) top repeat-x;
            border: solid 1px #FFF;
            border-bottom: solid 1px #999;
            cursor: default;
            padding: 0em;
            margin: 0em;
        }
        #popup_content
        {
            background: 16px 16px no-repeat url(Images/Alerts/info.gif);
            padding: 1em 1.75em;
            margin: 0em;
        }
        #popup_content.alert
        {
            background-image: url(Images/Alerts/info.gif);
        }
        #popup_content.confirm
        {
            background-image: url(Images/Alerts/important.gif);
        }
        #popup_content.prompt
        {
            background-image: url(Alerts/help.gif);
        }
        #popup_message
        {
            padding-left: 48px;
        }
        #popup_panel
        {
            text-align: center;
            margin: 1em 0em 0em 1em;
        }
        #popup_prompt
        {
            margin: .5em 0em;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="../../Scripts/jquery.alerts.js"></script>

</head>
<body>
    <table class="class" id="MyTable">
        <thead>
            <tr>
                <th>
                </th>
                <th>
                    Header 1
                </th>
                <th>
                    Header 2
                </th>
                <th>
                    Header 3
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a>
                        <img alt="" src="img1">a</a><a><img alt="" src="img2">b</a>
                </td>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    <a>
                        <img alt="" src="img1"></a>c<a><img alt="" src="img2">d</a>
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function()
    {

        $('#MyTable tbody tr td a:odd').live("click", function()
        {
            jConfirm('Do you wish to delete?.', 'Deletion', function(d)
            {
                if (d == true)
                {
                    var row = $(this).parents('tr');
                    // can maybe omit this. Problem might be with jConfirm.
                    $.post("Test", null, function(r)
                    {

                        row.remove();
                    });
                }
            });

        });
    });
</script>

这是控制器（我使用的是asp.net mvc，但你可以切换到任何东西，因为我不认为服务器端会导致问题）。

//在同一个控制器中。索引视图具有以上所有html。测试就是所谓的。

   public ActionResult Index()
        {
            return View();
        }
         public ContentResult Test()
        {
            return Content("hi");
        }

Answer 1

尝试：

var row = $(this).parents('tr');//use this to get current row

// do some ajax stuff
$(row).remove();

Answer 2

您可以使用DOM函数删除表行，如：

var row = $('#MyTable tbody tr td img:even').parents('tr');
var parentTableDOMElement = row.parents("table:first")[0];
parentTableDOMElement.deleteRow(row[0].rowIndex);

请注意，parent函数应该返回一个jQuery包装集，因此不需要使用$（row）之类的代码再次包装它。

我相信我理解为什么你得到空行变量。您不是一次删除一行。相反，对于每次单击，您将找到与选择器匹配的所有img元素，并且对于其中每个元素，一次性删除其父表行。

Answer 3

尝试以下基本HTML并查看是否删除了第二行。它应该说服你row.remove（）确实有效，也许其他东西都失败了。

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Test bed</title>
 </head>
 <body> 
  <table>
   <tr>
    <td>1</td>
    <td>2</td>
   </tr>
   <tr id="test">
    <td>3</td>
    <td>4</td>
   </tr>
  </table>
 </body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready
 (
  function()
  {
   $("tr#test").remove();
  }
 ); 
</script>

Answer 4

尝试使用“最近”的tr：

('#MyTable tbody tr td img:even').click(function()
{
    // check if they are sure if they want to delete. If true go on

    // now get this row they clicked on
    var row = $(this).closest('tr');

   // do some ajax stuff
   $(row).remove();
});

如何用jquery删除表行？

4 个答案: