[英]to execute a sql query in jquery so that the data gets removed from html table as well as database
我有一个html表,其中显示列-客户端名称,职员名称,问题和删除。 我的删除列仅包含每行的按钮。我的数据库包含列ID,日期,客户名称,员工姓名和事项。我的数据库不包含删除列,它仅显示在html表中。现在我要删除单击该行中相应删除按钮的特定行。只需检查一下我的jquery代码和sql代码,让我知道为什么它不起作用? jQuery代码-
$(document).ready(function()
{
$('input[type=button]').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
$.ajax(
{
type: "POST",
url: "delete.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
});
我的SQL代码-
<?php
include 'db.php' // DB Connection
if($_POST['id'])
{
$ID = mysql_escape_string($_POST['id']);
$sql = "DELETE FROM `newdata` WHERE id = '$ID'";
mysql_query($sql);
}
?>
和我的HTML是这样的-
<table class="footable" data-filter="#filter" id="tableresult">
<thead>
<th>Client name</th>
<th>Staff name</th>
<th>Matter</th>
<th> Delete</th>
</thead>
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span>
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span>
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>
<div id ="delete_btn">
<td class="delete_td"><input type="button" id="del" class="btn btn-danger" value="×"></input></td>
</div>
</tr>
我已经删除了<div>
你有你的周围包裹着最终<td>
因为这是很糟糕的标记。 而是依靠按钮本身,它也已从<input>
更改为<button>
。 我还向按钮添加了data-id
属性,因此您可以更轻松地访问行ID。 最后,我删除了id="del"
属性,因为我想这是一个循环,因此您所有的按钮都将具有相同的id
,这对您不利。 该类已添加btn-delete
以定位点击事件。
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text">
<?php echo $clientname; ?>
</span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text">
<?php echo $staff; ?>
</span>
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text">
<?php echo $matter; ?>
</span>
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>
<td class="delete_td">
<button data-id="<?php echo $id; ?>" class="btn btn-danger btn-delete" value="×" />
</td>
</tr>
jQuery非常简单。 我们为.btn-delete
类创建一个eventListener,该类位于您的删除按钮上。 然后,它获取被单击按钮的data-id
属性,并使用$.ajax()
调用来调用您的PHP。 成功执行该调用后,我们将运行一个名为removeRow()
的回调函数,该函数将删除前端<tr>
元素。 在该回调函数中,有一个简单的var time
来控制删除行的过渡时间,这是一个两步过程。 首先,它向上滑动行,然后将其从DOM
删除。
<script type="text/javascript">
$( document ).ready( function() {
// A Delete Button Was Clicked
$( document ).on( 'click', '.btn-delete', function() {
// Get the ID we're going to delete
var delID = $( this ).attr('data-id');
// Run Our Ajax
$.ajax({
url: "delete.php",
type: "POST",
data: "?id=" + delID,
success: function() {
removeRow(delID);
},
error: function() {
alert('Something went wrong');
}
});
} );
// Callback function to remove row
function removeRow( id ) {
var time = 500;
$( 'tr#' + id ).slideUp(time);
setTimeout( function() { $( 'tr#' + id ).remove(); }, time );
}
} );
</script>
我将假设您的php已经正确删除了该行,因此它可能保持不变。
大家终于明白了,感谢您的帮助和支持-
我的jQuery代码-
$(document).ready(function()
{
$('input[type=button]').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
var ID = $(this).parent().parent().attr('id');
var data = 'id=' + ID ;
var parent = $(this).parent().parent();
$.ajax(
{
type: "POST",
url: "delete.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
});
我的SQL代码-
<?php
include("db.php");
if($_POST['id'])
{
$id = mysql_escape_string($_POST['id']);
$sql = "DELETE FROM newdata WHERE id = '$id'";
mysql_query($sql);
}
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.