基于附加到行的增量php变量隐藏表行

Question

当通过 Mysql 动态填充表时，如何基于与 <tr>（增量变量 $i）关联的 php 变量隐藏特定的 <tr>。我环顾四周，但没有得到任何线索。

       <table id="example">
          <thead>
             <tr>
             <th>S.No.</th>
             <th>Item Number</th>
              <th>Question</th>
              <th>Option-A</th>
              <th>Option-B</th>
              <th>Option-C</th>
              <th>Option-D</th>
              <th style="text-align: center;">Correct Ans.</th>
              <th style="text-align: center;">Marks</th>
              <th style="text-align: center;">Action</th>
              </tr>
           </thead>
           <tbody>
        <?php

        if ($query != '')  {
        $res        =   mysql_query($query) ;

            $i = 1;

        while($row  =   mysql_fetch_array($res))

        {
        extract($row);

        ?>               
            <tr class="record">
            <td><?php echo $i ; ?></td>
            <td><?php echo $item_no ; ?></td>
            <td><?php echo $level_id ; ?></td>
            <td><textarea disabled name="question" rows="4" cols="35"><?php echo $question ; ?></textarea></td>
            <td><?php echo $option_A ; ?></td>
            <td><?php echo $option_B ; ?></td>
            <td><?php echo $option_C ; ?></td>
            <td><?php echo $option_D ; ?></td>
            <td><?php echo $correct_ans ; ?></td>
            <td><?php echo $marks ; ?></td>
            <td> <a href="#" class="btnIcon glyphicon glyphicon-trash delbutton" data-toggle="tooltip" title="Delete" id="<?php echo $id; ?>"></a></td>
     <script type="text/javascript" >
            $(function() {

                $(".delbutton").click(function() {
                    var del_id = $(this).attr("id");
                    var info = 'id=' + del_id;
                    var $tr = $(this).closest('tr');

                    if (confirm("Sure you want to delete this post? This cannot be undone later.")) {

                        $.ajax({
                            type : "POST",
                            url : "delete_entry.php", //URL to the delete php script
                            data: info,
                        success : function(response) {
                                   if(response=='deletion success'){
                                    $tr.find('td').fadeOut(1000,function(){ $tr.remove();  }); 

                                   }
                            }
                        });  
                    }
                    return false;
                });
                });
 </script>
             </tr>
        <?php $i++; } }    
            </tbody>
            </table>

还有我的 ajax 页面，

 <?php
header('Content-Type: application/json');  

session_start();

require("../config.php"); 
require("../Database.class.php"); 
require("../site.php"); 
$db = new Database(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);     
$fnc=new site_functions($db);

    $id     =   $_POST['id'];

    $deleted_date = date("Y-m-d h:i:s");
  $deleted_by       =    $_SESSION['session_admin_id'] ;

  $nots = $db->idToField("tbl_ques","notes",$id);
   if ($nots == "")
   {
   $date_string = "last deleted on|".$deleted_date."|" ;
   }
   else {
   $date_string = $nots."last deleted on|".$deleted_date."|" ;
   }
     $fnc->update_is_not_deleted_for_Pearsonvue("tbl_ques",$id, "$deleted_date", $deleted_by);       
    $notes_data = array("notes"=>$date_string);

  if($db->query_update("tbl_ques", $notes_data, "id=$id")){
      http_response_code();        
      echo json_encode('deletion success');
    }else{
       http_response_code(204);       
    }

?>

Answer 1

您已经很接近了 - 事实上，您的代码至少应该在第一次点击时工作。总之，

换行

$tr.find('td').fadeOut(1000,function(){ $tr.remove();  });

到

$('#' + del_id).closest('tr').remove(); }); 

它的作用是在 DOM 中找到删除按钮元素，然后在 DOM 结构中查找第一个 TR 元素，并将其从 DOM 中删除。

通常最好在异步回调中依赖简单变量，因为依赖对象，例如 $this 或在您的情况下为 $tr 可能会导致 $tr 变量指向的对象不是您预期的对象的问题。

编辑：添加了下面的工作 sn-p 来说明该技术。如果您仍有问题，请从您的代码中创建一个minimal verifiable version 作为 sn-p，以便我们查明问题。

$('.del').on('click', function() {

  $(this).closest('tr').remove();

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>First name</th>
      <th>Second name</th>
      <th>Age</th>
      <th style="text-align: center;">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Joe</td>
      <td>Bloggs</td>
      <td>22</td>
      <td style="text-align: center;">
        <button id='A1' class='del'>Delete</button>
      </td>
    </tr>

    <tr>
      <td>Jane</td>
      <td>Bloggs</td>
      <td>19</td>
      <td style="text-align: center;">
        <button id='A2' class='del'>Delete</button>
      </td>
    </tr>

    <tr>
      <td>Joanne</td>
      <td>Bloggs</td>
      <td>28</td>
      <td style="text-align: center;">
        <button id='A3' class='del'>Delete</button>
      </td>
    </tr>

  </tbody>
</table>