Question

我有一个html表，显示列 - 客户名称，员工姓名，事项和删除。我的删除列只包含每行的按钮。我的数据库包含列id，日期，客户名称，人员名称和问题。我的数据库不包含删除列，它只显示在我的html表中。现在我要删除点击该行中相应删除按钮的特定行。请查看我的jquery代码和sql代码，让我知道为什么它不起作用？ jquery代码 -

#define __USE_XOPEN
#include "unistd.h"
#include <xdo.h>

我的sql代码 -

 $(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();});
                   }
             });
        }
    });


});

我的html就是这样 -

<?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);
}

?>

Answer 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已经正确地删除了行，所以它可能只是保持不变。

Answer 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);
}

?>

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

2 个答案:

HTML

JavaScript / jQuery

PHP