javascript - 使用 Ajax 删除查询成功时隐藏表中的行

Question

我试图从 while 循环中隐藏行。我想在删除查询成功时隐藏整行。删除查询工作正常，需要帮助隐藏行。提前致谢。

While循环代码:

While 循环工作正常。我应该将任何类添加到行中以进行删除吗？ $chcrsid 是唯一的。

    while ($rowslctd=mysql_fetch_array($resultslctd))

{

    $chcrs=$rowslctd['chcrs'];
    $chcrsid=$rowslctd['chcrsid'];



echo"<tbody><tr>
<td>$chcrs</td>
<td>$chcrsid</td>

<td><form name='cancel_selection' class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>



    <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>

    </form></td>
</tr><tbody>

删除功能代码:

函数运行正常，但它没有隐藏从数据库中删除的行。

    <script>
$(function(){
    $('.btn.btn-cancel').click(function(e) {
        e.preventDefault();
        var $form = $(this).closest(".cancel_selection");

        var formData =  $form.serializeArray();
        var userId =  $form.find(".user_id").val();

        var URL = "cancelselection.php";
        $.post(URL, formData).done(function(data) {


        });

        fail(function(jqXHR, textStatus, errorThrown) {

        });

    });
});

</script>

Answer 1

为您要删除或隐藏的行提供唯一的 ID。使用 jQuery，您可以通过唯一的 id 来实现这一点。

如下所示:

HTML 代码

<table id="listData">
<tbody>
<?php while ($rowslctd=mysql_fetch_array($resultslctd)) {

$chcrs=$rowslctd['chcrs'];
$chcrsid=$rowslctd['chcrsid'];

echo"<tr id='row_selection_" .$chcrs. "'>
   <td>". $chcrs ."</td>
   <td>". $chcrsid ."</td>
<td><form name='cancel_selection_" .$chcrs. "' 
   id = 'cancel_selection_" .$chcrs. "'  
 class='cancel_selection' action=''>
<input type='hidden' name='crs' class='user_id' value='$chcrs'>
<input type='hidden' name='crsid' class='crsid' value='$chcrsid'>
<input type='hidden' name='insertid' class='insertid' value='$insertid'>
<button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
</form></td>
</tr>";
<?php } ?>
<tbody>
</table>

论 AJAX 的成功

$(function(){
$('.btn.btn-cancel').click(function(e) {
    e.preventDefault();
    var $form = $(this).closest(".cancel_selection");

    var formData =  $form.serializeArray();
    var userId =  $form.find(".user_id").val();

    var URL = "cancelselection.php";
    $.post(URL, formData).done(function(data) {
        var hideId =  'table#listData tr#row_selection_' + userId;
        $(hideId).remove(); // delete 
        $(hideId).hide(); // hide
    });

    fail(function(jqXHR, textStatus, errorThrown) {

    });
});
});