CODEWITHSUNDEEP
phpjquerymysql
Svetoslav Ivanov
Svetoslav Ivanov

Reputation: 15

Hide table rows one by one when click them using jQuery

I have usual sql scenario with php (mysqli_fetch_assoc) and create table. I want to hide rows randomly when i click on them. I may also need to delete them from the database at the same time, because this file is calling from another with ajax every 5 sec. and hiding is not enough because after calling the rows appear again.. :) I'm no sure that this is the best solution but I'm learning now.

I'm trying something like this it's working, but i can hide only last row. I want hide every row randomly :)

jQuery().ready(function(){
  $( "#trow" ).click(function() {
    $( "#trow" ).hide()
  });
});

<?php while ($row = mysqli_fetch_assoc($result_down)):    
    $datetime = $row['datetime'];
    $device = $row['host'];
    $message = $row['msg'];      
?>
  <tbody>
    <tr id="trow">
       <td id="device"><?php echo  $datetime;?></td>
       <td id="datatime"><?php echo $device;?></td>
     <  td id="message"><?php echo  $message;?></td>
    </tr>
  </tbody>      
<?php endwhile;?>

Upvotes: 0

Views: 243

Answers (2)

madflow
madflow

Reputation: 8490

Simply hiding rows after a click can be done like this:

(function () {
  $('table tr').click(function() {
    $(this).hide();
  });
})();

Upvotes: 0

KubiRoazhon
KubiRoazhon

Reputation: 1839

Try to change the trow from an id to a class name 

<tbody>
<tr class="trow">
   <td id="device"><?php echo  $datetime;?></td>
   <td id="datatime"><?php echo $device;?></td>
 <td id="message"><?php echo  $message;?></td>
</tr>

And in the JQuery side, call the click event on the class and not the id this time. The $(this) means the clicked element.

jQuery().ready(function(){
  $( ".trow" ).click(function() {
    $( this ).hide()
  });
});

Upvotes: 1

Related Questions