在jQuery中執行SQL查詢，以便從HTML表和數據庫中刪除數據

Question

我有一個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>

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

?>