[英]AJAX Delete row in table with PHP id selected
How would you delete a row from a table using AJAX based on this code?您将如何根据此代码使用 AJAX 从表中删除一行?
Here's the PHP code I'm working with:这是我正在使用的 PHP 代码:
foreach ($results as $result) {
echo "<tr><td>".$result['first_name']."</td><td>".$result['last_name']."</td><td><button class=\"btn btn-sm btn-danger delete_class\" id=\"".$result['id']."\" >DELETE</button></td></tr>";
}
As you can see, the button has an id paired with it.如您所见,该按钮有一个与之配对的 id。
Here's my jquery/AJAX code to delete the file from the database:这是我从数据库中删除文件的 jquery/AJAX 代码:
<script>
var $tr = $(this).attr('parentElement');
$('.delete_class').click(function(){
var del_id= $('.delete_class').attr('id');
$.ajax({
url:"delete_page.php?delete_id="+del_id,
cache:false,
success:function(result){
$tr.find('td').fadeOut(1000,function(){
$tr.remove();
});
}
});
});
</script>
There is also a PHP file that goes into the database and deletes the data, which works fine.还有一个进入数据库并删除数据的PHP文件,效果很好。
In the javascript code above ^ the variable being set at the top "$tr" is saying the 'parentAttribute' is the "td" not the "tr", how would I go up two parent attributes?在上面的 javascript 代码中 ^ 设置在顶部“$tr”的变量是说“parentAttribute”是“td”而不是“tr”,我将如何提升两个父属性?
What can I change my "success:function(result){ }" to to make the row immediately disappear, because,我可以将“成功:函数(结果){}”更改为使该行立即消失,因为,
$tr.find('td').fadeOut(1000,function(){
$tr.remove();
}
this code ^ isn't working.此代码 ^ 不起作用。
Change your current jquery
code as shown below:更改您当前的
jquery
代码,如下所示:
<script>
$('.delete_class').click(function(){
var tr = $(this).closest('tr'),
del_id = $(this).attr('id');
$.ajax({
url: "delete_page.php?delete_id="+ del_id,
cache: false,
success:function(result){
tr.fadeOut(1000, function(){
$(this).remove();
});
}
});
});
</script>
The closest
method returns the first ancestor of the selected element. closest
方法返回所选元素的第一个祖先。 https://api.jquery.com/closest/ https://api.jquery.com/closest/
HTML HTML
<table>
<thead>
<tr>
<th>Page Name</th>
<th>Page Image</th>
<th>Action </th>
</tr>
</thead>
<tbody>
<tr>
<td>Page Name1</td>
<td>Page Image1</td>
<td><a title="Delete" class="dlt" href="delete.php?id=1" >Delete</a></td>
</tr>
<tr>
<td>Page Name1</td>
<td>Page Image1</td>
<td><a title="Delete" class="dlt" href="delete.php?id=2" >Delete</a></td>
</tr>
</tbody>
</table>
Javascript Javascript
<script>
$("a.dlt").click(function(evt){
evt.preventDefault();
if(confirm("It will Delete All detail related to this. Are You Sure? ")){
var dis = this;
$.post($(dis).attr('href'),{'delete':'dlt'},function(resp){
if(resp == 1){
$(dis).parent().parent().remove();
}else{
alert(resp);
}
});
}
});
</script>
Try尝试
tr = $(this).parent();
there's no attribute called 'parentElement' that's why it's not working.没有名为“parentElement”的属性,这就是它不起作用的原因。
reference: Jquery Docs参考: Jquery 文档
I'd also change the function line to:我还将功能行更改为:
var del_id = $(this).attr('id');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.