javascript - 如何使用 jQuery 删除 HTML 行然后更新到数据库？

Question

目前，以下代码能够使前两列可编辑并对其进行处理，并将其发送到 PHP 并更新到数据库。然后，我尝试了一些代码来使用 JavaScript 代码删除特定行，但现在它导致可编辑和删除功能完全不起作用。

如何使可编辑行和删除行再次起作用？

编辑 可编辑使用来自 jquery.jeditable.mini.js 的来源

HTML代码:

<table>
<tbody><tr>
    <th>Room Types</th>
    <th>Acronym</th>
    <th>Delete</th>
</tr>
<tr id="row-0">
    <td><div class="edit" id="Deluxe Family">Deluxe Family</div></td>
    <td><div class="edit" id="DLX (2K)">DLX (2K)</div></td>
    <td><div class="delete" id="DLX (2K)"><span class="ui-button-text">X</span></div></td>
</tr>
<tr id="row-1">
    <td><div class="edit" id="Deluxe Queen">Deluxe Queen</div></td>
    <td><div class="edit" id="DLX (2Q)">DLX (2Q)</div></td>
    <td><div class="delete" id="DLX (2Q)"><span class="ui-button-text">X</span></div></td>
</tr></tbody>

Javascript:

$(document).ready(function() {
    $('.edit').editable('process.php', {
        loadurl   : 'load.php',
        id        : 'rt_code',
        name      : 'rt_codevalue',
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.delete').click(function(){
        var del_id = $(this).attr('id');
        var rowElement = $(this).parent().parent(); //grab the row

        $.ajax({
                type:'POST',
                url:'process.php',
                data: delete_id : del_id,
                success:function(data) {
                    if(data == "YES") {
                       rowElement.fadeOut(500).remove();
                    } 
                    else {
                    }
                }
        });
    });
});

PHP:

if (isset($_POST['rt_code'])  {
    echo $_POST['rt_codevalue'];
}

if(isset($_POST['delete_id'])) {
    $data = "DELETE FROM roomtype WHERE RT_CODE = ".$_POST['delete_id'];
    if(query($data)) {
        echo "YES";
    }
}

Answer 1

我猜错误是在你的 jquery ajax 代码中改成如下，

$.ajax({
            type:'POST',
            url:'process.php',
            data: {delete_id : del_id},
            success:function(data) {
                if(data == "YES") {
                   rowElement.fadeOut(500).remove();
                } 
                else {
                }
            }
    });

实际上你传递的数据看起来像一个对象但是你忘了放大括号'{}'我的意思是

  data: delete_id : del_id, 

应该是

data: {delete_id : del_id},