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

【问题标题】：Hide Row from table when delete Query success with Ajax使用 Ajax 删除查询成功时隐藏表中的行
【发布时间】：2017-03-15 06:10:17
【问题描述】：

我试图从 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>

【问题讨论】：

要隐藏哪一行？
进入while循环并点击取消按钮的行
你没有为while循环添加任何代码。
你可以在jquery中设置一个id：$('#elementName').attr('id', 'yourid')
@ACOMIT001 它在我的问题中请检查我是否提到了来自 while 循环的 cominf 代码。

标签： javascript php html ajax

【解决方案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) {

    });
});
});

【讨论】：

但它在 while loo 我如何提供唯一的 id 并在 ajax 中调用。你能通过编辑我的代码来解释一下吗？
你能帮我解决这个问题吗？？
我已经更新了我的答案.....举个例子......因为你没有添加任何while循环代码或模式代码......所以不能给出确切的答案解决方案.......
嗨，你能帮我解决一个问题吗？ stackoverflow.com/questions/42874579/…
naincy 你能帮我解决一个问题stackoverflow.com/questions/43342870/…

【解决方案2】：

TRY THIS
<tbody>
  <?php while ($rowslctd=mysql_fetch_array($resultslctd)):?>
  <tr id="row_to_hide">
     <td><?php echo $rowslctd['chcrs'];?></td>
     <td><?php echo $rowslctd['chcrsid'];?></td>
     <td>
        <form>
             <input name="id" type="hidden" value="<?php echo $rowslctd['chcrsid'];?>">
             <button onclick="process_form($(this).closest('form'))">Cancel</button>
        </form>
     </td>
  </tr>
  <?php endwhile;?>
</tbody>


<script>
    function process_form(form) {
        form.on('submit', function(e) {
            e.preventDefault();
            $.ajax('cancelselection.php',{
                data: $(form).serialize(),
                type: 'POST',
                success: function (data) {
                    $(form).closest('#row_to_hide').remove();
                }
             });
         });
    }
</script>

【讨论】：