如何使用jQuery删除HTML行,然后更新到数据库?

时间:2014-05-13 05:04:28

标签: javascript php jquery mysql

目前,以下代码能够使前2列可编辑并处理它并将其发送到PHP并更新到db。 然后我尝试使用JavaScript代码删除特定行的一些代码,但现在它导致可编辑和删除完全不起作用。

如何让可编辑和删除行再次工作?

编辑来自jquery.jeditable.mini.js

的可编辑使用来源

HTML code:

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

1 个答案:

答案 0 :(得分: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 {
                }
            }
    });

实际上你传递的数据看起来像是一个对象,但你忘了把括号&#39; {}&#39;我的意思是

  data: delete_id : del_id, 

应该是

data: {delete_id : del_id},