Jquery Ajax 从表和数据库中删除行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1141793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Ajax remove rows from table and in db
提问by sanders
I have a html table which if filled by values of an mysql table. This way:
我有一个 html 表，如果由 mysql 表的值填充。这边走：
function getCategories(){
$prod = new C_Product();
$cat= $prod->getCategorieenAsArray();
$tr = "";
foreach ($cat as $key => $value){
$tr.="<tr><td> </td><td>$value</td><td><img src=\"images/delete_button.gif\"></td></tr>\n";
}
return $tr;
}
Now I want to be able when i press the delete button to remove that row from the database and to refresh the table so that it's actually removed also from the table on the html page. I want to use for this jQuery and Ajax. That shouldn't be to difficult for me. My question is how to select the row that is going to be deleted? How would the jquery know which img is pressed?
现在，当我按下删除按钮时，我希望能够从数据库中删除该行并刷新表，以便它实际上也从 html 页面上的表中删除。我想用于这个 jQuery 和 Ajax。这对我来说应该不难。我的问题是如何选择要删除的行？jquery 如何知道按下了哪个 img？
Should i add a class to the img / tr with a value in it? If I use an id I would have to redefine my jquery function for each row that's being added and thus doesn't seem a right solution.
我应该在 img / tr 中添加一个类，其中包含一个值吗？如果我使用 id，我将不得不为正在添加的每一行重新定义我的 jquery 函数，因此似乎不是一个正确的解决方案。
So can anyone please help me further?
那么有人可以帮我进一步吗？
Thanks
谢谢
//edit:
//编辑：
In the mean time I went on my own way to try figure stuff out and I have now a complete ajax call with the correct id.
与此同时，我按照自己的方式尝试解决问题，现在我有了一个完整的 ajax 调用，并且具有正确的 ID。
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();
}
});
});
});
Now the only problem I have is to remove the tr from the table when the id is deleted in the database. This is how my tr looks like:
现在我唯一的问题是在数据库中删除 id 时从表中删除 tr。这是我的 tr 的样子：
$tr.="<tr><td> </td><td>$value</td><td id=\"$key\"><img class=\"deleterow\" src=\"images/delete_button.gif\"></td></tr>\n";
回答by AutomatedTester
I would defintely add a class to the the img or tr and would also add an ID that has the ID of the element in the database
我肯定会向 img 或 tr 添加一个类，并且还会添加一个具有数据库中元素 ID 的 ID
but if you don't it would be somethng like this
但如果你不这样做，它会是这样的
$('img').click(function(){
var id = $(this ~ tr).attr("id");
$.ajax(type: "POST",
url: "some.php",
data: "id="+id,
success: function(msg){
$(id).remove();
});
});
EDIT TO YOUR EDIT:
编辑您的编辑：
Have you tried the $("#id ~ tr") selector to remove it? e.g. $(#id ~ tr).remove();
您是否尝试过 $("#id ~ tr") 选择器将其删除？例如$(#id ~ tr).remove();
I would also put the ID on the tr if you are adding IDs then it would be $('#id').remove();to get rid of the tr
如果您要添加 ID，我也会将 ID 放在 tr 上，然后$('#id').remove();去掉 tr
回答by xandy
Normally I would use a link instead of purely an image for that purpose. Since it is semantically correct:
通常我会使用链接而不是纯粹的图像来达到这个目的。因为它在语义上是正确的：
and then
进而
$(".deleteButton").click(function() { var deleteId = $(this).attr("href").substring(10); // Ajax or URl call etc. });
$(".deleteButton").click(function() { var deleteId = $(this).attr("href").substring(10); // Ajax 或 URl 调用等 });
One step further, I will even not put any image within the a, just put something like:
更进一步，我什至不会在 a 中放置任何图像，只需放置如下内容：
<a href="..." class="...">Delete this row</a>
and leave any styling rule to CSS to handle (like image replacement).
并将任何样式规则留给 CSS 处理（如图像替换）。
回答by kgiannakakis
See this question. It will help you get the row and column index of a table cell. Then make the Ajax call to remove the entry from the database. On the success callback remove the row from the table using standard jQuery actions. You may want to block access to the html page, while the Ajax call is in progress. This will prevent the user from clicking another image.
看到这个问题。它将帮助您获取表格单元格的行和列索引。然后进行 Ajax 调用以从数据库中删除该条目。在成功回调中，使用标准 jQuery 操作从表中删除行。您可能希望在 Ajax 调用正在进行时阻止对 html 页面的访问。这将阻止用户单击另一个图像。
回答by sixthgear
Your intuitions about this problem were on the right track. You need to pass the database id of each record and store it somewhere in the HTML so that you know what value to pass to the backend. If you were planning to implement a solution that degrades gracefully for users without javascript (usually a good idea) what you might do is implement a non-ajax view that deletes a single row. If your application uses pretty URLs, that view might be accessed by /table/delete/23 (or whatever id). In you table generation code, you want to add a link for each row that looks like this:
你对这个问题的直觉是正确的。您需要传递每条记录的数据库 id 并将其存储在 HTML 中的某个位置，以便您知道要传递给后端的值。如果您打算实施一个解决方案，该解决方案可以在没有 javascript 的情况下为用户优雅降级（通常是一个好主意），您可能要做的是实施一个删除单行的非 ajax 视图。如果您的应用程序使用漂亮的 URLs，该视图可能会被 /table/delete/23 （或任何 id）访问。在表生成代码中，您希望为每一行添加一个链接，如下所示：
<a class="delete-button" href="/table/delete/23">Delete</a>
At this point, you should have a nicely working non-javascript solution. Now we can add the AJAX. This script uses some javascript string mangling to extract the last part of the href and turn it into an id.
在这一点上，您应该有一个很好的非 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!
});
Also, when you are implementing your backend PHP function to accept the AJAX request, don't forget to sanitize your input!
此外，当您实现后端 PHP 函数以接受 AJAX 请求时，不要忘记清理您的输入！
