Jquery Ajax从表和db中删除行

我有一个html表，如果填充mysql表的值。 这条路：

function getCategories(){ $prod = new C_Product(); $cat= $prod->getCategorieenAsArray(); $tr = ""; foreach ($cat as $key => $value){ $tr.=" $value\n"; } return $tr; } 

现在我希望能够按下删除按钮从数据库中删除该行并刷新表，以便它实际上也从html页面上的表中删除。 我想用于这个jQuery和Ajax。 这对我来说应该不难。 我的问题是如何选择要删除的行？ jquery如何知道哪个img被按下了？

我应该在img / tr中添加一个带有值的类吗？ 如果我使用id，我将不得不为要添加的每一行重新定义我的jquery函数，因此似乎不是正确的解决方案。

那么有人可以帮助我吗？

谢谢

//编辑：

与此同时，我继续以自己的方式尝试数字输出，现在我已经使用正确的id完成了一个完整的ajax调用。

 jQuery(document).ready(function(){ jQuery("img.deleterow").click(function(){ id = jQuery(this).parent().attr("id"); jQuery.ajax({ type: "POST", data: "id=" +id, url: "ajax_handler.php", success: function(msg){ jQuery(this).parent().remove(); } }); }); }); 

现在我唯一的问题是在数据库中删除id时从表中删除tr。 这就是我的tr的样子：

 $tr.=" $value\n"; 

Answer 1

我会defintely向img或tr添加一个类，并且还会添加一个ID，该ID具有数据库中元素的ID

但如果你不这样做会有点像这样

 $('img').click(function(){ var id = $(this ~ tr).attr("id"); $.ajax(type: "POST", url: "some.php", data: "id="+id, success: function(msg){ $(id).remove(); }); }); 

编辑你的编辑：

您是否尝试过$（“＃id~tr”）选择器将其删除？ 例如$(#id ~ tr).remove();

如果你要添加ID，我也会把ID放在tr上，然后就是$('#id').remove(); 摆脱tr

Answer 2

通常情况下，我会使用链接而不是纯粹的图像。 因为它在语义上是正确的：

然后

$（“。deleteButton”）。click（function（）{var deleteId = $（this）.attr（“href”）。substring（10）; // Ajax或URl调用等}};

更进一步，我甚至不会在a中放置任何图像，只需输入如下内容：

 Delete this row 

并将任何样式规则留给CSS来处理（如图像替换）。

Answer 3

看到这个问题 。 它将帮助您获取表格单元格的行和列索引。 然后进行Ajax调用以从数据库中删除条目。 在成功回调上，使用标准jQuery操作从表中删除行。 在Ajax调用正在进行时，您可能希望阻止访问html页面。 这将阻止用户单击其他图像。

Answer 4

你对这个问题的直觉是正确的。 您需要传递每条记录的数据库ID并将其存储在HTML中的某个位置，以便您知道要传递给后端的值。 如果您计划为没有javascript的用户（通常是个好主意）实现优雅降级的解决方案，那么您可能要实现的是删除单行的非ajax视图。 如果您的应用程序使用漂亮的URL ，则可以通过/ table / delete / 23（或任何ID）访问该视图。 在表生成代码中，您希望为每行添加一个如下所示的链接：

 Delete 

在这一点上，你应该有一个很好的非JavaScript工作解决方案。 现在我们可以添加AJAX了。 此脚本使用一些javascript字符串修改来提取href的最后部分并将其转换为id。

 $(".delete-button").click(function() { var id = this.href.slice(this.href.lastIndexOf('/')+1); // perform AJAX call using this id return false; // return false so that we don't follow the link! }); 

此外，当您实现后端PHP函数以接受AJAX请求时，不要忘记清理您的输入 ！