In this post i have explain about How to Remove row from table with fadeOut effect using jquery and php. Here i have used ajax to delete the database record. It will work without refresh page and row table data delete with fadeOut effect.
![Remove row from table with fadeOut effect using jquery and php Remove row from table with fadeOut effect using jquery and php](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdt_MBCL3M0RjSJOlZdiKRlGRWeRLSiib7Mi3xgdxS0DIwwWMQ_d0KJGDeYb43y2ahOZC82lU-u20-ch05CyNazCM2FGzsvSzkelYBquWzXh7DBwnA4HihRAqsZRfqJD_xeYdcHgUU5iEc/s1600/row_delete+copy.jpg)
Database
Create sample table 'user' and insert some value.
CREATE TABLE IF NOT EXISTS `user` ( `id` int(11) NOT NULL, `name` varchar(150) NOT NULL, `email` varchar(150) NOT NULL, );
HTML
Form id="user_add" - get all form attribute data value in ajax.
data-id="1" - store in data value in form element.
<html> <body> <form id="user_add"> <label>Name</label> <input name="name" required type="text"> <label>Email</label> <input name="email" required type="text"> <input type="submit" name="submit"> </form> <h3>User information</h3> <div align="center"> <table border="1" class="mains"> <tr> <td>Name</td> <td>Email</td> <td>Action</td> </tr> <?php $db = new mysqli('localhost', 'root', '', '1next2'); $view_user = $db->query("SELECT * FROM user"); $i=1; foreach ($view_user as $key => $users): ?> <tr> <td><?php echo $users['name'] ?></td> <td><?php echo $users['email'] ?></td> <td> <a data-id="<?php echo $users['id'] ?>" class="delete" href="#">Delete</a> </td> </tr> <?php endforeach; ?> </table> </div> </div> </body> </html>
Jquery
function data-id value post in ajax-delete.php
<script> $(document).on('click','.delete',function(){ var element = $(this); var del_id = element.attr("data-id"); var info = 'id=' + del_id; if(confirm("Are you sure you want to delete this?")) { $.ajax({ type: "POST", url: "ajax_delete.php", data: info, success: function(){ } }); $(this).parents("tr").animate({ backgroundColor: "#003" }, "slow") .animate({ opacity: "hide" }, "slow"); } return false; }); </script>
ajax_delete.php
<?php if($_POST['id']!=""): extract($_POST); $id=mysqli_real_escape_string($db,$id); $sql = $db->query("DELETE FROM user WHERE id='$id'"); endif; ?>
"You see, God helps only people who work hard. That principle is very clear."
- A. P. J. Abdul Kalam
Related Topics
- Ajax add,view and delete using mysqli
- CSS3 image zoom fade effect
- CSS3 text animation effect
- CSS3 image rotate animation effect
- Codeigniter load CSS and Javascript files.
- Facebook Style Drop Down Log out Menu
- Facebook style login system using Mysqli and CSS
- How to create custom search engine
- CSS style input box design coding
- Twitter style compose box
awesome website
ReplyDelete