CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-animate
Oliver Spryn
Oliver Spryn

Reputation: 17348

jQuery Slide Up Table Row

I am building a custom jQuery plugin which allows the user to delete records within a table in real-time, among many other things. When the records are deleted, I would like the the background-color of the deleted table row to turn red, then slide up out of view.

Here is a snippet of my code below, which doesn't do any of the color changing animation, nor does it slide up the row. However, it does delete the row when what is supposed to be the slide up animation, finishes. Some things to know when reviewing the code below:

  1. The "object" variable is a jQuery reference to the object which was clicked and triggered the delete operation.
  2. The "object.parent().parent()" object is the row which is being deleted.
  3. The "deleteHighlight" CSS class contains the color which will turn the row a red color.
  4. The "addClass" method uses jQueryUI's "addClass" method, not jQuery's. It allows an animated effect and a callback.
object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

Here is the HTML on which this is being executed, nothing special:

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

Could someone please provide an example of how I can fix this?

Thank you for your time.

Upvotes: 29

Views: 39625

Answers (7)

IC-Winner
IC-Winner

Reputation: 1

function rowSlideUp(e,time) {
  if (!time) { time = 200; }
  var row = $(e).parents("tr").eq(0);
  var height = row.innerHeight();
  row.stop().css({transition:"none",opacity:1}).animate({opacity:0}, 120, function(){
                var that = $(this);
                $(this).find("td, th").css({padding:0}).html('<div class="animate-row" style="height:' + height + 'px;padding:0">&#160;</div>');
                $(this).find(".animate-row").slideUp(time, function(){
                    that.remove();
                });
            });
  return false;
}
table { 
  border-collapse: collapse;
  border-spacing: 0;
  width:100%; 
}
td,th { 
  padding:9px 12px; 
  font-size:16px; 
  background: #fff;
  color:#000;
  border: #DEE2EE 1px solid;
}
td {
  background:#fff;
}
th {
  background:#F3F5Fa;
}
td[tabindex] { cursor:pointer; outline:none; }
td[tabindex]:active { color:#ff3300; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<table>
  <tr><th>Title</th><th>X</th></tr>
  <tr><td>cell 1</td><td tabindex="-1" onclick="rowSlideUp(this,300)">click</td></tr>
  <tr><td>cell 2</td><td tabindex="-1" onclick="rowSlideUp(this,300)">click</td></tr>
  <tr><td>cell 3</td><td tabindex="-1" onclick="rowSlideUp(this,300)">click</td></tr>
</table>

Upvotes: 0

Myke Black
Myke Black

Reputation: 1339

The problem with animating table rows is that it has a display type of table-row, and you cannot simply change it to display:block because that will mess up the table structure. what you need to do is wrap the td contents in divs as in GianPero's answer, then slide those up, and the row height will automatically reduce with them. This code is a more simple version and will work on rows containing th tags as well as td. 

var fadeSpeed = 400;
var slideSpeed= 300;
var row = $(this).parent().parent();

row.fadeTo(fadeSpeed, 0.01, () => {
    row.children('td, th')
        .animate({ padding: 0 })
        .wrapInner('<div />')
        .children()
        .slideUp(slideSpeed, () => { row.remove(); });
});

You can modify the fadespeed and slidespeed to any duration in milliseconds or you can set them to jquery constants like 'slow' or 'fast'

Row animation code inspired by Animating Table Rows with jQuery

Upvotes: 3

Gianpiero Franchino
Gianpiero Franchino

Reputation: 51

Sure, you can!

Wrap each td of the tr you want slide up into a div, then slide up those divs!

Of course, you have to animate the paddings (top and bottom) of each td.

Here you can find a full example here:

http://jsfiddle.net/3t3Na/474/

Extract of my source code:

$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
    $(this).find('td').each(function(index, element) {

    // Wrap each td inside the selected tr in a temporary div
    $(this).wrapInner('<div class="td_wrapper"></div>');

    // Fold the table row
    $(this).parent().find('.td_wrapper').each(function(index, element) {

    // SlideUp the wrapper div
    $(this).slideUp();

    // Remove padding from each td inside the selected tr
    $(this).parent().parent().find('td').each(function(index, element) {
        $(this).animate({
            'padding-top': '0px',
            'padding-bottom': '0px'
        }, function() {
            object.parentsUntil('tr').parent().remove();
        });
    });
});

Upvotes: 4

user6269864
user6269864

Reputation:

For some reason, the wrapInner() with div didn't work for me, so I've made a less elegant solution, where you animate the font-size of the row, then hide it, then restore the font size to normal while the row is invisible. 

    this.trs
        .animate({ 'fontSize': '1px' }, 70)
        .slideUp(1)
        .animate({ 'fontSize': '12px'}, 10)
        ;

I use this for animating collapse/expand resource groups in fullcalendar.js + scheduler.js calendar views.

Upvotes: 0

Jacob Stamm
Jacob Stamm

Reputation: 1828

The most elegant way to handle the slide and removal is to wrap each td's inner contents with a div, and to simultaneously reduce the padding of the td and the height of the divs. Check out this simple demo: http://jsfiddle.net/stamminator/z2fwdLdu/1/

Upvotes: 7

Dutchie432
Dutchie432

Reputation: 29160

addClass does not accept a callback function, since it performed immediately. I think you may want something more like this.

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
});

Upvotes: 3

Stuart Burrows
Stuart Burrows

Reputation: 10814

I suspect this is partly a browser issue. You shouldn't really target <tr />'s since browsers interpret them differently. Additionally they behave differently than block elements.

In this example: http://jsfiddle.net/lnrb0b/3t3Na/1/ your code works partially in chrome. The <tr /> is allowed styling (unlike in some IE versions) but you can't animate it. If you make it display:block no worries, but then it's a bit rubbish as a table :)

In this example: http://jsfiddle.net/lnrb0b/3t3Na/2/ you'll see I've animated the <td />'s but they barely work and painfully slowly at that.

Have a test of those and I'll try think of a solution in the meantime.

Upvotes: 14

Related Questions