我有一个 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>
最佳答案
HTML
我已删除 <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>
JavaScript/jQuery
jQuery 相当简单。我们为类.btn-delete
创建一个事件监听器它位于您的删除按钮上。然后它抓取 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
我假设您的 php 已经正确删除了该行,因此它可能会保持不变。
关于php - 在jquery中执行sql查询,以便从html表和数据库中删除数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34744452/