从DOM生成的表中删除一行

Delete one row from DOM built table

本文关键字：一行 删除 DOM      更新时间：2023-09-26

我有一个使用DOM动态构建的表。它有10个列，在每一行上，我都有一些数据，这些数据是我从一个websocket、文本框和一个提交按钮中获得的，用于将每一行添加到数据库中。

提交行后，如何删除行
有人提到jQuery，但不知道该怎么做。

编辑

我正在使用Chrome，下面的所有脚本都有问题。我就是这样解决的：我使用的不是$('input')，而是jQuery('input')，所有脚本都运行良好。谢谢你的帮助。

试试这样的。。。

$('input').click(function() {
    $(this).closest('td').remove();
});

演示：http://jsfiddle.net/wdm954/32W63/

编辑：

这里有另一种方法。。。

$('table form').submit(function() {
    // run some ajax here to do your database work
    $(this).closest('td').remove();
});

您可以这样做：

$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
   var buttonHnd = $(this);
   $.post("your-php-file.php", 
     {/* the data you want to post e.g. */ name: $("#name").val()},
     function(data){
      buttonHnd.parent().parent().remove();
     }
   );
});
});

var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);

您可能还对我的AJAXEtchjQuery插件感兴趣。除其他外，它允许您将表中的一行视为表单，并使用AJAX提交其中的所有表单元素，将其与服务器(通常是非表单版本(的结果交换。我在许多内部应用程序中使用它来就地编辑数据。

您可以尝试以下操作：

// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();

来源：JQuery HowTo

您可以使用jquery‘remove将其从dom中删除。。。

http://api.jquery.com/remove/

相关文章：