How to delete table row using jQuery animation

In the following post we will look at the how to delete table row using jquery animation, Generally user has the set of data in a tabular format on page and wants to delete the entire row, in traditional technique user was deleting the data successfully but later on getting frustrated when row get deleted but page was re-loaded again, this entire process was a time consuming and user has to wait till page data refreshed.

so we have came with some beautiful jquery-ajax method through which table row data get deleted smoothly via ajax technique and page won't reload.

Table HTML Structure:

<pre class="prettyprint">
  <table class="table zebra-style">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td>1</td>
        <td>Arvind</td>
        <td>Prajapati</td>
        <td><a href="http://twitter.com/arvind5588">@arvind5588</a> </td>
        <td class="table-action-hide"> <a href="#" class="delete-row" style="opacity: 0;"> <i class="fa fa-trash-o">DELETE</i> </a> </td>
      </tr>
      <tr>
        <td>2</td>
        <td>Facebook</td>
        <td>Inc</td>
        <td>@facebook</td>
        <td class="table-action-hide"> <a href="#" class="delete-row" style="opacity: 0;"> <i class="fa fa-trash-o">DELETE</i> </a> </td>
      </tr>
      <tr class="odd">
        <td>3</td>
        <td>Google</td>
        <td>Search</td>
        <td>@google</td>
        <td class="table-action-hide"> <a href="#" class="delete-row" style="opacity: 0;"> <i class="fa fa-trash-o">DELETE</i> </a> </td>
      </tr>
    </tbody>
  </table>
</pre>

 

Apply some css on table to look better:

Style.css

table.zebra-style {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    text-align: left;
    border: 1px solid #ccc;
    margin-bottom: 25px;
    width: 70%
}

table.zebra-style th {
    color: #444;
    font-size: 13px;
    font-weight: normal;
    padding: 10px 8px;
}

table.zebra-style td {
    color: #777;
    padding: 8px;
    font-size: 13px;
}

table.zebra-style tr.odd {
    background: #f2f2f2;
}

.table-action {
    text-align: center;
}

.table-action-hide a {
    opacity: 0;
}

.table-action a,
.table-action-hide a {
    display: inline-block;
    margin-right: 5px;
    color: #666;
}

.table-action a:hover,
.table-action-hide a:hover {
    color: #333;
}

.table-action a:last-child,
.table-action-hide a:last-child {
    margin-right: 0;
}

 

Now we will see the jquery code which make it more functional:

jQuery(document).ready(function() { 
   // Delete row in a table 
   jQuery('.delete-row').click(function () { 
     var c = confirm("Continue delete?"); 
     if (c) jQuery(this).closest('tr').fadeOut(function () { 
       jQuery(this).remove(); 
     }); 
     return false; 
   }); 
   
   // Show aciton upon row hover 
   jQuery('.table tbody tr').hover(function() {
        jQuery(this).find('.table-action-hide a').animate({
            opacity: 1
        });
    }, function() {
        jQuery(this).find('.table-action-hide a').animate({
            opacity: 0
        });
    });
});