jQuery Slide Up Table Row

Question

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:

The "object" variable is a jQuery reference to the object which was clicked and triggered the delete operation.
The "object.parent().parent()" object is the row which is being deleted.
The "deleteHighlight" CSS class contains the color which will turn the row a red color.
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:




 
Title
Content Snapshot
Management






Title

Content
Content
my-url

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

Thank you for your time.

user_821146 · Answer

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

user_15695616 · Answer

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(' ');
                $(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; }



  Title X
  cell 1 click
  cell 2 click
  cell 3 click

jQuery Slide Up Table Row

7 Answers