Question

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

while循环代码：

虽然Loop工作正常。我应该添加任何类来删除行。 $ 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) {

    });
});
});

Answer 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>

删除时从表中隐藏行使用Ajax查询成功

2 个答案: