Скрытие строки таблицы на основе добавочной переменной php, присоединенной к строке - PullRequest
Новая
       2

Скрытие строки таблицы на основе добавочной переменной php, присоединенной к строке

0 голосов
/ 29 января 2020

Как мне скрыть конкретную <tr> на основе php переменной, связанной с этим <tr> (инкрементная переменная $i) с jQuery, когда таблица заполняется динамически через Mysql. Я огляделся, но ничего не понял. 

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

?>

1 Ответ

1 голос
/ 29 января 2020

Вы уже близко - на самом деле похоже, что ваш код должен работать по крайней мере с первого клика. В любом случае,

Измените строку 

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

на 

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

Для этого нужно найти элемент кнопки удаления в DOM, а затем просмотреть «структуру» DOM к первому элементу TR и удалите его из DOM.

Обычно лучше полагаться на простые переменные в обратных вызовах asyn c, поскольку полагаться на объекты, такие как $ this или в вашем случае, $ tr может вызвать проблемы, когда объект, на который указывает переменная $ tr, не тот, который вы ожидали.

РЕДАКТИРОВАТЬ: Добавлен рабочий фрагмент ниже, чтобы проиллюстрировать технику. Если у вас все еще есть проблема, пожалуйста, создайте минимальную проверяемую версию как фрагмент из вашего кода, чтобы мы могли точно определить проблему. 

$('.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>
...