使用 javascript / jquery 删除表格行答案

【问题标题】：Delete a table row with javascript / jquery使用 javascript / jquery 删除表格行
【发布时间】：2009-05-28 17:07:55
【问题描述】：

这不起作用。 Firebug 没有抛出任何错误。

HTML：

<table>
       <tr><td>BookA</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
       <tr><td>BookB</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookC</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookD</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
</table>

Javascript：

function deleteRow(ref) {   
    $(ref).parent().parent().remove(); 
 }

如果可能，我想使用内联 javascript 的解决方案

【问题讨论】：

为什么要使用带有内联 javascript 的解决方案？如果您对可以放置代码的位置有一些限制，您可以在表格底部放置一个脚本标签，并提供给您的代码。内联 JS 丑陋、不必要、难以维护且容易搞砸。

标签： javascript jquery

【解决方案1】：

首先，内联 JavaScript（href="javascript:x" 或 onclick="x"）通常不好。使用内联 JavaScript，您将无法访问事件对象，并且您无法确定 this 所引用的内容。

jQuery（以及几乎所有其他 JavaScript 库/框架）都有内置的事件处理。因此，您的代码在事件处理程序中将如下所示：

$('a.red').click(function(e) {
  e.preventDefault(); // don't follow the link
  $(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});

这是一个演示：http://jsbin.com/okaxu

【讨论】：

> 您将无法访问事件对象，并且您无法确定 this 引用的是什么。这就是为什么我将它作为参数传递
我会使用 parents('tr') 而不是 parent().parent() - 除此之外，很好的答案。
是的，但是您将 this 作为参数传递——在这种情况下，this 引用了窗口。
谢谢大家。 @Paolo：你绝对是对的——我已经修改了我的帖子和演示，现在可以使用 parents()。
.parents('tr') 将抓取所有祖先 tr 元素，这是不对的。我会使用 .closest('tr')。

【解决方案2】：

试试这个：

// Bind all the td element a click event
$('table td.deleteRow').click(function(){
    $(this).parent().remove();
});

顺便说一句，它会从您的 html 代码中删除 javascript。有了这个html代码

<table>
    <tr>
        <td>BookA</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookB</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookC</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookD</td>
        <td class="red deleteRow">Delete</td>
    </tr>
</table>

【讨论】：

选择器应该是“a.red”以复制他正在尝试做的事情。
是的，我正在编辑我的帖子。但是我使用了一个新的 deleteRow 类，因为我认为红色类只是为了演示......并且可能在其他地方使用！
我更喜欢 deleteRow。我只是使用红色来使用 css .red {color: red;}
还不错；不过，您仍然应该保留链接，因为没有它您会丢失指针手（您可以使用 CSS 找回，但为什么呢？）并失去语义。
如果他将它与数据库（然后是服务器端脚本）或其他东西链接，那么你是对的！但是如果你想尊重语义，我认为在这种情况下输入按钮应该是最好的，因为点击它会触发一个动作，而不是把用户转发到某个地方..

【解决方案3】：

删除内联脚本

<script>
    $(function(){
        $('table td a').live('click', function(){
            $(this).parents('tr').remove();
            return false;
        });
    });
</script>

【讨论】：

【解决方案4】：

这行不通，因为 $(this) 没有像您想象的那样引用 a-tag（我认为它是指窗口对象或其他东西）

不要在 href 属性中使用内联 javascript，而是这样做

改为这样做

<script type="text/javascript">
 $("table a").click( function() {
  $(this).parent().parent().remove();
 });
</script>

【讨论】：

第一个“.paren()”有语法错误 - 缺少一个“t”

【解决方案5】：

我相信您的 deleteRow 函数存在错误。应该这样写：

function deleteRow(ref) {   
    ref.parent().parent().remove(); 
}

您传递给 deleteRow 的 ref 已经是一个 jQuery 对象。你不应该使用 $(ref)，只使用 ref，因为 ref 已经是一个 jQuery 对象。

【讨论】：

这不是错误。这是不必要的，但不是错误。例如，您可以在没有错误的情况下运行 $($(img))

【解决方案6】：

我不得不同意应该避免使用内联 javascript，但如果有其他原因需要使用它或有益于使用它，这里是方法。

<table>
   <tr><td>BookA</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookB</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookC</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookD</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
</table>

【讨论】：