在 jquery 中执行 sql 查询，以便从 html 表和数据库中删除数据

Posted 2023-05-09

【中文标题】在 jquery 中执行 sql 查询，以便从 html 表和数据库中删除数据

【英文标题】：to execute a sql query in jquery so that the data gets removed from html table as well as database

【发布时间】：2016-04-17 02:45:13

【问题描述】：

我有一个 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; ?>" /&gt;
</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="&times;"></input></td>
</div>
</tr>

【问题讨论】：

检查错误和你的控制台

请不要使用 mysql_ 数据库扩展，它已被弃用（在 PHP7 中永远消失了）特别是如果您只是学习 PHP，请花精力学习 PDO 或 mysqli_ 数据库扩展, and here is some help to decide which to use

Your script is at risk for SQL Injection Attacks.

请stop using mysql_* functions。 These extensions 已在 PHP 7 中删除。了解 PDO 和 MySQLi 的 prepared 语句并考虑使用 PDO，it's really pretty easy。

您的$.ajax() 中有语法错误，因为您在type: "POST"; 和url: 'delete.php'; 的末尾有一个分号;，它应该是一个逗号-type: "POST", 和@ 987654341@。另外，$('#tableresult').removeRow(ID); ; 中有一个额外的分号

【参考方案1】：

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; ?>" /&gt;
    </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="&times;" />
    </td>
</tr>

javascript / jQuery

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

我将假设您的 php 已经正确删除了该行，因此它可能会保持不变。

【参考方案2】：

大家终于明白了，感谢您的帮助和支持-

我的 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);


?>