How to Use slideDown or show function on a table row

Question

I m trying to add a row to a table and have that row slide into view  however the slidedown function seems to be adding a display block style to the table row which messes up the layout   Any ideas how to work around this   Here s the code     get   some url         val1   id       function  data        var row       detailed edit row        row hide        row html data       row slideDown 1000

User · Answer

I can be done if you set the td s in the row to display none at the same time you start animating the height on the row  tbody tr      min-height  50px    tbody tr ng-hide td      display  none    tr hide-line      -moz-transition   4s linear all      -o-transition   4s linear all      -webkit-transition   4s linear all      transition   4s linear all      height  50px      overflow  hidden        amp  ng-hide     angularJs specific         height  0          min-height  0

User · Answer

Select the contents of the row like this     row  contents   slideDown       contents   -  Get the children of each element in the set of matched elements  including text and comment nodes

User · Answer

This code works    lt  DOCTYPE html gt    lt html lang  en  gt       lt head gt           lt meta charset  utf-8    gt           lt script src  http   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt           lt title gt  lt  title gt           lt script gt              function addRow                         displaynone   show                        displaynone td                    wrapInner   lt div class  innerDiv  style  height 0    gt                        div   animate   height   20px                            lt  script gt           lt style gt               mycolumn border  1px solid black                displaynone display  none            lt  style gt       lt  head gt       lt body gt           lt table align  center  width  50   gt               lt tr gt                   lt td class  mycolumn  gt Row 1 lt  td gt               lt  tr gt               lt tr gt                   lt td class  mycolumn  gt Row 2 lt  td gt               lt  tr gt               lt tr class  displaynone  gt                   lt td class  mycolumn  gt Row 3 lt  td gt               lt  tr gt               lt tr gt                   lt td class  mycolumn  gt Row 4 lt  td gt               lt  tr gt           lt  table gt           lt br gt           lt button onclick  addRow     gt add lt  button gt           lt  body gt   lt  html gt

User · Answer

I liked the plugin that Vinny s written and have been using  But in case of tables inside sliding row  tr td   the rows of nested table are always hidden even after slid up  So I did a quick and simple hack in the plugin not to hide the rows of nested table  Just change the following line  var  cells     this  find  td      to  var  cells     this  find   gt  td      which finds only immediate tds not nested ones  Hope this helps someone using the plugin and have nested tables

User · Answer

I did use the ideas provided here and faced some problems  I fixed them all and have a smooth one-liner I d like to share       row to slideup   find   gt  td   css   height   0px    wrapInner   lt div style   display block      gt    parent   find  td  gt  div   slideUp  slow   function      this  parent   parent   remove         It uses css on the td element  It reduces the height to 0px  That way only the height of the content of the newly created div-wrapper inside of each td element matters   The slideUp is on slow  If you make it even slower you might realize some glitch  A small jump at the beginning  This is because of the mentioned css setting  But without those settings the row would not decrease in height  Only its content would   At the end the tr element gets removed   The whole line only contains JQuery and no native Javascript   Hope it helps   Here is an example code        lt html gt               lt head gt                       lt script src  https   code jquery com jquery-3 2 0 min js  gt                 lt  script gt               lt  head gt               lt body gt                       lt table gt                               lt thead gt                                       lt tr gt                                               lt th gt header column 1 lt  th gt                                               lt th gt header column 2 lt  th gt                                       lt  tr gt                               lt  thead gt                               lt tbody gt                                       lt tr id  row1  gt  lt td gt row 1 left lt  td gt  lt td gt row 1 right lt  td gt  lt  tr gt                                       lt tr id  row2  gt  lt td gt row 2 left lt  td gt  lt td gt row 2 right lt  td gt  lt  tr gt                                       lt tr id  row3  gt  lt td gt row 3 left lt  td gt  lt td gt row 3 right lt  td gt  lt  tr gt                                       lt tr id  row4  gt  lt td gt row 4 left lt  td gt  lt td gt row 4 right lt  td gt  lt  tr gt                               lt  tbody gt                       lt  table gt                       lt script gt      setTimeout function             row2   find   gt  td   css   height   0px    wrapInner   lt div style   display block      gt    parent   find  td  gt  div   slideUp  slow           function      this  parent   parent   remove              2000                        lt  script gt               lt  body gt       lt  html gt

User · Answer

You could try wrapping the contents of the row in a  lt span gt  and having your selector be     detailed edit row span    - a bit hackish  but I just tested it and it works  I also tried the table-row suggestion above and it didn t seem to work   update  I ve been playing around with this problem  and from all indications jQuery needs the object it performs slideDown on to be a block element  So  no dice  I was able to conjure up a table where I used slideDown on a cell and it didn t affect the layout at all  so I am not sure how yours is set up  I think your only solution is to refactor the table in such a way that it s ok with that cell being a block  or just  show    the damn thing  Good luck

User · Answer

I did use the ideas provided here and faced some problems  I fixed them all and have a smooth one-liner I d like to share       row to slideup   find   gt  td   css   height   0px    wrapInner   lt div style   display block      gt    parent   find  td  gt  div   slideUp  slow   function      this  parent   parent   remove         It uses css on the td element  It reduces the height to 0px  That way only the height of the content of the newly created div-wrapper inside of each td element matters   The slideUp is on slow  If you make it even slower you might realize some glitch  A small jump at the beginning  This is because of the mentioned css setting  But without those settings the row would not decrease in height  Only its content would   At the end the tr element gets removed   The whole line only contains JQuery and no native Javascript   Hope it helps   Here is an example code        lt html gt               lt head gt                       lt script src  https   code jquery com jquery-3 2 0 min js  gt                 lt  script gt               lt  head gt               lt body gt                       lt table gt                               lt thead gt                                       lt tr gt                                               lt th gt header column 1 lt  th gt                                               lt th gt header column 2 lt  th gt                                       lt  tr gt                               lt  thead gt                               lt tbody gt                                       lt tr id  row1  gt  lt td gt row 1 left lt  td gt  lt td gt row 1 right lt  td gt  lt  tr gt                                       lt tr id  row2  gt  lt td gt row 2 left lt  td gt  lt td gt row 2 right lt  td gt  lt  tr gt                                       lt tr id  row3  gt  lt td gt row 3 left lt  td gt  lt td gt row 3 right lt  td gt  lt  tr gt                                       lt tr id  row4  gt  lt td gt row 4 left lt  td gt  lt td gt row 4 right lt  td gt  lt  tr gt                               lt  tbody gt                       lt  table gt                       lt script gt      setTimeout function             row2   find   gt  td   css   height   0px    wrapInner   lt div style   display block      gt    parent   find  td  gt  div   slideUp  slow           function      this  parent   parent   remove              2000                        lt  script gt               lt  body gt       lt  html gt

User · Answer

I liked the plugin that Vinny s written and have been using  But in case of tables inside sliding row  tr td   the rows of nested table are always hidden even after slid up  So I did a quick and simple hack in the plugin not to hide the rows of nested table  Just change the following line  var  cells     this  find  td      to  var  cells     this  find   gt  td      which finds only immediate tds not nested ones  Hope this helps someone using the plugin and have nested tables

User · Answer

I ve gotten around this by using the td elements in the row     ui item  children  td   effect  highlight     color    4ca456     1000     Animating the row itself causes strange behaviour  mostly async animation problems   For the above code  I am highlighting a row that gets dragged and dropped around in the table to highlight that the update has succeeded  Hope this helps someone

User · Answer

http   jsfiddle net PvwfK 136    lt table cellspacing  0  cellpadding  0  class  table01  id  form table  style  width 100    gt   lt tr gt       lt td style  cursor pointer  width 20   text-align left   id  header  gt           lt label style  cursor pointer   gt   lt b id  header01  gt   Customer Details lt  b gt            lt  label gt       lt  td gt   lt  tr gt   lt tr gt       lt td style  widtd 20   text-align left   gt           lt div id  content  class  content01  gt               lt table cellspacing  0  cellpadding  0  id  form table  gt                   lt tr gt                       lt td gt A C ID lt  td gt                       lt td gt   lt  td gt                       lt td gt 3000 A01 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt A C ID lt  td gt                       lt td gt   lt  td gt                       lt td gt 3000 A01 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt A C ID lt  td gt                       lt td gt   lt  td gt                       lt td gt 3000 A01 lt  td gt                   lt  tr gt               lt  table gt           lt  div gt       lt  td gt   lt  tr gt        function          table01 td   on  click   function          var  rows       content01        if      content01 first   is   hidden                  header01   text    Customer Details                content01 first   slideDown          else               header01   text    Customer Details                content01 first   slideUp

User · Answer

http   jsfiddle net PvwfK 136    lt table cellspacing  0  cellpadding  0  class  table01  id  form table  style  width 100    gt   lt tr gt       lt td style  cursor pointer  width 20   text-align left   id  header  gt           lt label style  cursor pointer   gt   lt b id  header01  gt   Customer Details lt  b gt            lt  label gt       lt  td gt   lt  tr gt   lt tr gt       lt td style  widtd 20   text-align left   gt           lt div id  content  class  content01  gt               lt table cellspacing  0  cellpadding  0  id  form table  gt                   lt tr gt                       lt td gt A C ID lt  td gt                       lt td gt   lt  td gt                       lt td gt 3000 A01 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt A C ID lt  td gt                       lt td gt   lt  td gt                       lt td gt 3000 A01 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt A C ID lt  td gt                       lt td gt   lt  td gt                       lt td gt 3000 A01 lt  td gt                   lt  tr gt               lt  table gt           lt  div gt       lt  td gt   lt  tr gt        function          table01 td   on  click   function          var  rows       content01        if      content01 first   is   hidden                  header01   text    Customer Details                content01 first   slideDown          else               header01   text    Customer Details                content01 first   slideUp

User · Answer

I had problems with all the other solutions offered but ended up doing this simple thing that is smooth as butter   Set up your HTML like so    lt tr id row1 style  height 0px  gt  lt td gt     lt div id div1 style  display none  gt      Hidden row content goes here    lt  div gt   lt  td gt  lt  tr gt    Then set up your javascript like so   function toggleRow rowid     var row   document getElementById  row    rowid     if row style height     0px              div    rowid  slideDown  fast          row style height    1px         else            div    rowid  slideUp  fast          row style height    0px               Basically  make the  invisible  row 0px high  with a div inside  Use the animation on the div  not the row  and then set the row height to 1px   To hide the row again  use the opposite animation on the div and set the row height back to 0px

User · Answer

The plug offered by Vinny is really close  but I found and fixed a couple of small issues    It greedily targeted td elements beyond just the children of the row being hidden  This would have been kind of ok if it had then sought out those children when showing the row  While it got close  they all ended up with  display  none  on them  rendering them hidden  It didn t target child th elements at all  For table cells with lots of content  like a nested table with lots of rows   calling slideRow  up    regardless of the slideSpeed value provided  it d collapse the view of the row as soon as the padding animation was done  I fixed it so the padding animation doesn t trigger until the slideUp   method on the wrapping  is done    function         var sR             defaults                slideSpeed  400             easing  false             callback  false                   thisCallArgs               slideSpeed  400             easing  false             callback  false                   methods               up  function arg1  arg2  arg3                   if typeof arg1     object                        for p in arg1                           sR thisCallArgs eval p    arg1 p                                          else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                         sR thisCallArgs slideSpeed   arg1                   else                      sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     if typeof arg2     string                        sR thisCallArgs easing   arg2                   else if typeof arg2     function                        sR thisCallArgs callback   arg2                   else if typeof arg2     undefined                        sR thisCallArgs easing   sR defaults easing                                        if typeof arg3     function                        sR thisCallArgs callback   arg3                   else if typeof arg3     undefined   amp  amp  typeof arg2     function                        sR thisCallArgs callback   sR defaults callback                                        var  cells     this  children  td  th                     cells wrapInner   lt div class  slideRowUp    gt                     var currentPadding    cells css  padding                     cellContentWrappers     this  find   slideRowUp                     cellContentWrappers slideUp sR thisCallArgs slideSpeed  sR thisCallArgs easing  function                          this  parent   animate   paddingTop   0px   paddingBottom   0px                               complete  function                                  this  children   slideRowUp   replaceWith   this  children   slideRowUp   contents                                   this  parent   css    display    none                                    this  css    padding   currentPadding                                                                                           var wait   setInterval function                        if  cellContentWrappers is   animated       false                           clearInterval wait                           if typeof sR thisCallArgs callback     function                                sR thisCallArgs callback call this                                                                      100                                                                                                                       return   this                             down  function  arg1  arg2  arg3                   if typeof arg1     object                        for p in arg1                           sR thisCallArgs eval p    arg1 p                                          else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                         sR thisCallArgs slideSpeed   arg1                   else                      sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     if typeof arg2     string                        sR thisCallArgs easing   arg2                   else if typeof arg2     function                        sR thisCallArgs callback   arg2                   else if typeof arg2     undefined                        sR thisCallArgs easing   sR defaults easing                                        if typeof arg3     function                        sR thisCallArgs callback   arg3                   else if typeof arg3     undefined   amp  amp  typeof arg2     function                        sR thisCallArgs callback   sR defaults callback                                        var  cells     this  children  td  th                     cells wrapInner   lt div class  slideRowDown  style  display none     gt                      cellContentWrappers    cells find   slideRowDown                      this  show                     cellContentWrappers slideDown sR thisCallArgs slideSpeed  sR thisCallArgs easing  function       this  replaceWith    this  contents                          var wait   setInterval function                        if  cellContentWrappers is   animated       false                           clearInterval wait                           if typeof sR thisCallArgs callback     function                                sR thisCallArgs callback call this                                                                      100                   return   this                                         fn slideRow   function method  arg1  arg2  arg3           if typeof method     undefined                if sR methods method                    return sR methods method  apply this  Array prototype slice call arguments  1                                      jQuery

User · Answer

You could try wrapping the contents of the row in a  lt span gt  and having your selector be     detailed edit row span    - a bit hackish  but I just tested it and it works  I also tried the table-row suggestion above and it didn t seem to work   update  I ve been playing around with this problem  and from all indications jQuery needs the object it performs slideDown on to be a block element  So  no dice  I was able to conjure up a table where I used slideDown on a cell and it didn t affect the layout at all  so I am not sure how yours is set up  I think your only solution is to refactor the table in such a way that it s ok with that cell being a block  or just  show    the damn thing  Good luck

User · Answer

function hideTr tr      tr find  td   wrapInner   lt div style  display  block     gt    parent   find  td  gt  div   slideUp 50  function          tr hide        var  set   jQuery this        set replaceWith  set contents              function showTr tr      tr show     tr find  td   wrapInner   lt div style  display  none     gt    parent   find  td  gt  div   slideDown 50  function         var  set   jQuery this        set replaceWith  set contents               you can use these methods like   jQuery   data-toggle-tr-trigger    click function       var  tr   jQuery this  parents trClass  nextUntil trClass     if  tr is   hidden          showTr  tr       else       hideTr  tr

User · Answer

You could try wrapping the contents of the row in a  lt span gt  and having your selector be     detailed edit row span    - a bit hackish  but I just tested it and it works  I also tried the table-row suggestion above and it didn t seem to work   update  I ve been playing around with this problem  and from all indications jQuery needs the object it performs slideDown on to be a block element  So  no dice  I was able to conjure up a table where I used slideDown on a cell and it didn t affect the layout at all  so I am not sure how yours is set up  I think your only solution is to refactor the table in such a way that it s ok with that cell being a block  or just  show    the damn thing  Good luck

User · Answer

I can be done if you set the td s in the row to display none at the same time you start animating the height on the row  tbody tr      min-height  50px    tbody tr ng-hide td      display  none    tr hide-line      -moz-transition   4s linear all      -o-transition   4s linear all      -webkit-transition   4s linear all      transition   4s linear all      height  50px      overflow  hidden        amp  ng-hide     angularJs specific         height  0          min-height  0

User · Answer

Select the contents of the row like this     row  contents   slideDown       contents   -  Get the children of each element in the set of matched elements  including text and comment nodes

User · Answer

I had problems with all the other solutions offered but ended up doing this simple thing that is smooth as butter   Set up your HTML like so    lt tr id row1 style  height 0px  gt  lt td gt     lt div id div1 style  display none  gt      Hidden row content goes here    lt  div gt   lt  td gt  lt  tr gt    Then set up your javascript like so   function toggleRow rowid     var row   document getElementById  row    rowid     if row style height     0px              div    rowid  slideDown  fast          row style height    1px         else            div    rowid  slideUp  fast          row style height    0px               Basically  make the  invisible  row 0px high  with a div inside  Use the animation on the div  not the row  and then set the row height to 1px   To hide the row again  use the opposite animation on the div and set the row height back to 0px

User · Answer

I simply wrap the tr dynamically then remove it once the slideUp slideDown has complete  It s a pretty small overhead adding and removing one or a couple of  tags and then removing them once the animation is complete  I don t see any visible lag at all doing it   SlideUp       my table  gt  tbody  gt  tr my row     find  td     wrapInner   lt div style  display  block     gt      parent     find  td  gt  div     slideUp 700  function         this  parent   parent   remove            SlideDown       my table  gt  tbody  gt  tr my row     find  td     wrapInner   lt div style  display  none     gt      parent     find  td  gt  div     slideDown 700  function       var  set     this      set replaceWith  set contents             I have to pay tribute to fletchzone com as I took his plugin and stripped it back to the above  cheers mate

User · Answer

Animations are not supported on table rows   From  Learning jQuery  by Chaffer and Swedberg       Table rows present particular   obstacles to animation  since browsers   use different values  table-row and   block  for their visible display   property   The  hide   and  show     methods  without animation  are always   safe to use with table rows   As of   jQuery version 1 1 3   fadeIn   and    fadeOut   can be used as well      You can wrap your td contents in a div and use the slideDown on that  You need to decide if the animation is worth the extra markup

User · Answer

If you need to slide and fade a table row at the same time  try using these   jQuery fn prepareTableRowForSliding   function          tr   this       tr children  td   wrapInner   lt div style  display  none     gt         return  tr      jQuery fn slideFadeTableRow   function speed  easing  callback         tr   this      if   tr is   hidden               tr show   find  td  gt  div   animate  opacity   toggle   height   toggle    speed  easing  callback         else            tr find  td  gt  div   animate  opacity   toggle   height   toggle    speed  easing  function                 tr hide                callback                          return  tr        document  ready function           tr special   hide   prepareTableRowForSliding           a toggle   toggle function             button     this            tr    button closest  tr special      this will be specific to your situation          tr slideFadeTableRow 300   swing   function                 button text  Hide table row                       function             button     this            tr    button closest  tr special      this will be specific to your situation          tr slideFadeTableRow 300   swing   function                 button text  Display table row

User · Answer

Here s a plug-in that I wrote up for this  it takes a little from Fletch s implementation  but mine is used solely to slide a row up or down  no inserting rows     function      var sR         defaults            slideSpeed  400          easing  false          callback  false                 thisCallArgs            slideSpeed  400          easing  false          callback  false            methods            up  function  arg1 arg2 arg3                if typeof arg1     object                     for p in arg1                        sR thisCallArgs eval p    arg1 p                                  else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                      sR thisCallArgs slideSpeed   arg1               else                  sR thisCallArgs slideSpeed   sR defaults slideSpeed                             if typeof arg2     string                    sR thisCallArgs easing   arg2               else if typeof arg2     function                    sR thisCallArgs callback   arg2               else if typeof arg2     undefined                     sR thisCallArgs easing   sR defaults easing                                if typeof arg3     function                     sR thisCallArgs callback   arg3               else if typeof arg3     undefined   amp  amp  typeof arg2     function                    sR thisCallArgs callback   sR defaults callback                                var  cells     this  find  td                 cells wrapInner   lt div class  slideRowUp    gt                 var currentPadding    cells css  padding                 cellContentWrappers     this  find   slideRowUp                 cellContentWrappers slideUp sR thisCallArgs slideSpeed sR thisCallArgs easing  parent   animate                                                                                                                   paddingTop   0px                                                                                                                   paddingBottom   0px                                                                                                                     complete  function                                                                                                                            this  children   slideRowUp   replaceWith   this  children   slideRowUp   contents                                                                                                                           this  parent   css   display   none                                                                                                                           this  css   padding   currentPadding                                                                                                                                     var wait   setInterval function                      if  cellContentWrappers is   animated       false                        clearInterval wait                       if typeof sR thisCallArgs callback     function                             sR thisCallArgs callback call this                                                          100                                                                                                                   return   this                      down  function  arg1 arg2 arg3                if typeof arg1     object                     for p in arg1                        sR thisCallArgs eval p    arg1 p                                  else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                      sR thisCallArgs slideSpeed   arg1               else                  sR thisCallArgs slideSpeed   sR defaults slideSpeed                             if typeof arg2     string                    sR thisCallArgs easing   arg2               else if typeof arg2     function                    sR thisCallArgs callback   arg2               else if typeof arg2     undefined                     sR thisCallArgs easing   sR defaults easing                                if typeof arg3     function                     sR thisCallArgs callback   arg3               else if typeof arg3     undefined   amp  amp  typeof arg2     function                    sR thisCallArgs callback   sR defaults callback                                var  cells     this  find  td                 cells wrapInner   lt div class  slideRowDown  style  display none     gt                  cellContentWrappers    cells find   slideRowDown                  this  show                 cellContentWrappers slideDown sR thisCallArgs slideSpeed  sR thisCallArgs easing  function       this  replaceWith    this  contents                      var wait   setInterval function                      if  cellContentWrappers is   animated       false                        clearInterval wait                       if typeof sR thisCallArgs callback     function                             sR thisCallArgs callback call this                                                          100               return   this                         fn slideRow   function method arg1 arg2 arg3        if typeof method     undefined             if sR methods method                 return sR methods method  apply this  Array prototype slice call arguments 1                          jQuery     Basic Usage       row id   slideRow  down        row id   slideRow  up      Pass slide options as individual arguments       row id   slideRow  down   500     slide speed     row id   slideRow  down   500  function     alert  Row available           slide speed and callback function     row id   slideRow  down   500   linear   function     alert  Row available        slide speed  easing option and callback function     row id   slideRow  down    slideSpeed  500  easing   linear   callback  function     alert  Row available           options passed as object   Basically  for the slide down animation  the plug-in wraps the contents of the cells in DIVs  animates those  then removes them  and vice versa for the slide up  with some extra steps to get rid of the cell padding   It also returns the object you called it on  so you can chain methods like so       row id   slideRow  down   css   font-color    F00       make the text in the row red   Hope this helps someone

User · Answer

I want to slide whole tbody and I ve managed this problem by combining fade and slide effects   I ve done this in 3 stages  2nd and 3rd steps are replaced in case you want to slide down or up    Assigning height to tbody  Fading all td and th  Sliding tbody    Example of slideUp   tbody css  height   tbody css  height     tbody find  td  th   fadeOut 200  function        tbody slideUp 300

User · Answer

I m a bit behind the times on answering this  but I found a way to do it     function eventinfo id        tr   document getElementById  ei  id       div   document getElementById  d  id       if  tr style display     none             tr style display  table-row             div  slideDown  fast          else             div  slideUp  fast            setTimeout function   tr style display  none     200             I just put a div element inside the table data tags  when it is set visible  as the div expands  the whole row comes down  then tell it to fade back up  then timeout so you see the effect  before hiding the table row again     Hope this helps someone

User · Answer

function hideTr tr      tr find  td   wrapInner   lt div style  display  block     gt    parent   find  td  gt  div   slideUp 50  function          tr hide        var  set   jQuery this        set replaceWith  set contents              function showTr tr      tr show     tr find  td   wrapInner   lt div style  display  none     gt    parent   find  td  gt  div   slideDown 50  function         var  set   jQuery this        set replaceWith  set contents               you can use these methods like   jQuery   data-toggle-tr-trigger    click function       var  tr   jQuery this  parents trClass  nextUntil trClass     if  tr is   hidden          showTr  tr       else       hideTr  tr

User · Answer

I ve gotten around this by using the td elements in the row     ui item  children  td   effect  highlight     color    4ca456     1000     Animating the row itself causes strange behaviour  mostly async animation problems   For the above code  I am highlighting a row that gets dragged and dropped around in the table to highlight that the update has succeeded  Hope this helps someone

User · Answer

Here s a plug-in that I wrote up for this  it takes a little from Fletch s implementation  but mine is used solely to slide a row up or down  no inserting rows     function      var sR         defaults            slideSpeed  400          easing  false          callback  false                 thisCallArgs            slideSpeed  400          easing  false          callback  false            methods            up  function  arg1 arg2 arg3                if typeof arg1     object                     for p in arg1                        sR thisCallArgs eval p    arg1 p                                  else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                      sR thisCallArgs slideSpeed   arg1               else                  sR thisCallArgs slideSpeed   sR defaults slideSpeed                             if typeof arg2     string                    sR thisCallArgs easing   arg2               else if typeof arg2     function                    sR thisCallArgs callback   arg2               else if typeof arg2     undefined                     sR thisCallArgs easing   sR defaults easing                                if typeof arg3     function                     sR thisCallArgs callback   arg3               else if typeof arg3     undefined   amp  amp  typeof arg2     function                    sR thisCallArgs callback   sR defaults callback                                var  cells     this  find  td                 cells wrapInner   lt div class  slideRowUp    gt                 var currentPadding    cells css  padding                 cellContentWrappers     this  find   slideRowUp                 cellContentWrappers slideUp sR thisCallArgs slideSpeed sR thisCallArgs easing  parent   animate                                                                                                                   paddingTop   0px                                                                                                                   paddingBottom   0px                                                                                                                     complete  function                                                                                                                            this  children   slideRowUp   replaceWith   this  children   slideRowUp   contents                                                                                                                           this  parent   css   display   none                                                                                                                           this  css   padding   currentPadding                                                                                                                                     var wait   setInterval function                      if  cellContentWrappers is   animated       false                        clearInterval wait                       if typeof sR thisCallArgs callback     function                             sR thisCallArgs callback call this                                                          100                                                                                                                   return   this                      down  function  arg1 arg2 arg3                if typeof arg1     object                     for p in arg1                        sR thisCallArgs eval p    arg1 p                                  else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                      sR thisCallArgs slideSpeed   arg1               else                  sR thisCallArgs slideSpeed   sR defaults slideSpeed                             if typeof arg2     string                    sR thisCallArgs easing   arg2               else if typeof arg2     function                    sR thisCallArgs callback   arg2               else if typeof arg2     undefined                     sR thisCallArgs easing   sR defaults easing                                if typeof arg3     function                     sR thisCallArgs callback   arg3               else if typeof arg3     undefined   amp  amp  typeof arg2     function                    sR thisCallArgs callback   sR defaults callback                                var  cells     this  find  td                 cells wrapInner   lt div class  slideRowDown  style  display none     gt                  cellContentWrappers    cells find   slideRowDown                  this  show                 cellContentWrappers slideDown sR thisCallArgs slideSpeed  sR thisCallArgs easing  function       this  replaceWith    this  contents                      var wait   setInterval function                      if  cellContentWrappers is   animated       false                        clearInterval wait                       if typeof sR thisCallArgs callback     function                             sR thisCallArgs callback call this                                                          100               return   this                         fn slideRow   function method arg1 arg2 arg3        if typeof method     undefined             if sR methods method                 return sR methods method  apply this  Array prototype slice call arguments 1                          jQuery     Basic Usage       row id   slideRow  down        row id   slideRow  up      Pass slide options as individual arguments       row id   slideRow  down   500     slide speed     row id   slideRow  down   500  function     alert  Row available           slide speed and callback function     row id   slideRow  down   500   linear   function     alert  Row available        slide speed  easing option and callback function     row id   slideRow  down    slideSpeed  500  easing   linear   callback  function     alert  Row available           options passed as object   Basically  for the slide down animation  the plug-in wraps the contents of the cells in DIVs  animates those  then removes them  and vice versa for the slide up  with some extra steps to get rid of the cell padding   It also returns the object you called it on  so you can chain methods like so       row id   slideRow  down   css   font-color    F00       make the text in the row red   Hope this helps someone

User · Answer

I d like to add a comment to  Vinny s post but dont have the rep so have to post an answer     Found a bug with your plugin - when you just pass an object in with arguments they get overwritten if no other arguments are passed in  Easily resolved by changing the order the arguments are processed  code below  I ve also added an option for destroying the row after closing  only as I had a need for it        row id   slideRow  up   true      destroys the row   function           var sR             defaults                slideSpeed  400              easing  false              callback  false                    thisCallArgs                slideSpeed  400              easing  false              callback  false              destroyAfterUp  false                    methods                up  function  arg1  arg2  arg3                    if  typeof arg2     string                         sR thisCallArgs easing   arg2                    else if  typeof arg2     function                         sR thisCallArgs callback   arg2                    else if  typeof arg2     undefined                         sR thisCallArgs easing   sR defaults easing                                    if  typeof arg3     function                         sR thisCallArgs callback   arg3                    else if  typeof arg3     undefined   amp  amp  typeof arg2     function                         sR thisCallArgs callback   sR defaults callback                                    if  typeof arg1     object                         for  p in arg1                            sR thisCallArgs p    arg1 p                                           else if  typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                          sR thisCallArgs slideSpeed   arg1                    else if  typeof arg1     undefined   amp  amp   typeof arg1     boolean                          sR thisCallArgs destroyAfterUp   arg1                    else                       sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     var  row     this                   var  cells    row children  th  td                     cells wrapInner   lt div class  slideRowUp    gt                     var currentPadding    cells css  padding                     cellContentWrappers     this  find   slideRowUp                     cellContentWrappers slideUp sR thisCallArgs slideSpeed  sR thisCallArgs easing  parent   animate                       paddingTop   0px                       paddingBottom   0px                                           complete  function                                this  children   slideRowUp   replaceWith   this  children   slideRowUp   contents                               this  parent   css    display    none                                this  css    padding   currentPadding                                                               var wait   setInterval function                          if   cellContentWrappers is   animated       false                            clearInterval wait                           if  sR thisCallArgs destroyAfterUp                                                         row replaceWith                                                        if  typeof sR thisCallArgs callback     function                                 sR thisCallArgs callback call this                                                                      100                   return   this                              down  function  arg1  arg2  arg3                     if  typeof arg2     string                         sR thisCallArgs easing   arg2                    else if  typeof arg2     function                         sR thisCallArgs callback   arg2                    else if  typeof arg2     undefined                         sR thisCallArgs easing   sR defaults easing                                    if  typeof arg3     function                         sR thisCallArgs callback   arg3                    else if  typeof arg3     undefined   amp  amp  typeof arg2     function                         sR thisCallArgs callback   sR defaults callback                                    if  typeof arg1     object                         for  p in arg1                            sR thisCallArgs eval p    arg1 p                                           else if  typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                          sR thisCallArgs slideSpeed   arg1                    else                       sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     var  cells     this  children  th  td                     cells wrapInner   lt div class  slideRowDown  style  display none     gt                      cellContentWrappers    cells find   slideRowDown                      this  show                     cellContentWrappers slideDown sR thisCallArgs slideSpeed  sR thisCallArgs easing  function        this  replaceWith   this  contents                          var wait   setInterval function                          if   cellContentWrappers is   animated       false                            clearInterval wait                           if  typeof sR thisCallArgs callback     function                                 sR thisCallArgs callback call this                                                                      100                   return   this                                         fn slideRow   function  method  arg1  arg2  arg3            if  typeof method     undefined                 if  sR methods method                     return sR methods method  apply this  Array prototype slice call arguments  1                                      jQuery

User · Answer

I want to slide whole tbody and I ve managed this problem by combining fade and slide effects   I ve done this in 3 stages  2nd and 3rd steps are replaced in case you want to slide down or up    Assigning height to tbody  Fading all td and th  Sliding tbody    Example of slideUp   tbody css  height   tbody css  height     tbody find  td  th   fadeOut 200  function        tbody slideUp 300

User · Answer

Have a table row with nested table    lt tr class  dummyRow  style  display  none   gt       lt td gt           lt table style  display  none   gt All row content inside here lt  table gt       lt  td gt   lt  tr gt      To slideDown the row       dummyRow   show   find  table   slideDown      Note  the row and it s content  here it is  table   both should be hidden before animation starts     To slideUp the row       dummyRow   find  table   slideUp  normal   function       dummyRow   hide         The second parameter  function    is a callback     Simple    Note that there are also several options that can be added as parameters of the slide up down functions  the most common being durations of  slow  and  fast

User · Answer

You could try wrapping the contents of the row in a  lt span gt  and having your selector be     detailed edit row span    - a bit hackish  but I just tested it and it works  I also tried the table-row suggestion above and it didn t seem to work   update  I ve been playing around with this problem  and from all indications jQuery needs the object it performs slideDown on to be a block element  So  no dice  I was able to conjure up a table where I used slideDown on a cell and it didn t affect the layout at all  so I am not sure how yours is set up  I think your only solution is to refactor the table in such a way that it s ok with that cell being a block  or just  show    the damn thing  Good luck

User · Answer

I simply wrap the tr dynamically then remove it once the slideUp slideDown has complete  It s a pretty small overhead adding and removing one or a couple of  tags and then removing them once the animation is complete  I don t see any visible lag at all doing it   SlideUp       my table  gt  tbody  gt  tr my row     find  td     wrapInner   lt div style  display  block     gt      parent     find  td  gt  div     slideUp 700  function         this  parent   parent   remove            SlideDown       my table  gt  tbody  gt  tr my row     find  td     wrapInner   lt div style  display  none     gt      parent     find  td  gt  div     slideDown 700  function       var  set     this      set replaceWith  set contents             I have to pay tribute to fletchzone com as I took his plugin and stripped it back to the above  cheers mate

User · Answer

Have a table row with nested table    lt tr class  dummyRow  style  display  none   gt       lt td gt           lt table style  display  none   gt All row content inside here lt  table gt       lt  td gt   lt  tr gt      To slideDown the row       dummyRow   show   find  table   slideDown      Note  the row and it s content  here it is  table   both should be hidden before animation starts     To slideUp the row       dummyRow   find  table   slideUp  normal   function       dummyRow   hide         The second parameter  function    is a callback     Simple    Note that there are also several options that can be added as parameters of the slide up down functions  the most common being durations of  slow  and  fast

User · Answer

I m a bit behind the times on answering this  but I found a way to do it     function eventinfo id        tr   document getElementById  ei  id       div   document getElementById  d  id       if  tr style display     none             tr style display  table-row             div  slideDown  fast          else             div  slideUp  fast            setTimeout function   tr style display  none     200             I just put a div element inside the table data tags  when it is set visible  as the div expands  the whole row comes down  then tell it to fade back up  then timeout so you see the effect  before hiding the table row again     Hope this helps someone

User · Answer

I neded a table with hidden rows that slide in and out of view on row click    x000D   x000D      tr-show-sub   click function e      x000D      var elOne     this   x000D          tr-show-sub   each function key  value    x000D          var elTwoe     this   x000D           x000D          if elOne get 0      elTwoe get 0     x000D              if   this  next   tr-sub   hasClass  tr-sub-shown      x000D                  elTwoe next   tr-sub   removeClass  tr-sub-shown    x000D                  elTwoe next  tr   find  td   find  div   slideUp    x000D                  elTwoe next  tr   find  td   slideUp    x000D                x000D            x000D           x000D          if elOne get 0      elTwoe get 0     x000D              if elOne next   tr-sub   hasClass  tr-sub-shown      x000D                  elOne next   tr-sub   removeClass  tr-sub-shown    x000D                  elOne next  tr   find  td   find  div   slideUp    x000D                  elOne next  tr   find  td   slideUp    x000D                else   x000D                  elOne next   tr-sub   addClass  tr-sub-shown    x000D                  elOne next  tr   find  td   slideDown    x000D                  elOne next  tr   find  td   find  div   slideDown    x000D                x000D            x000D         x000D      x000D  body   x000D          background   eee  x000D        x000D       x000D       wrapper   x000D          margin  auto  x000D          width  50   x000D          padding  10px  x000D          margin-top  10   x000D        x000D       x000D      table   x000D          background  white  x000D          width  100   x000D        x000D       x000D      table th   x000D          background  gray  x000D          text-align  left  x000D        x000D       x000D      table th  td   x000D          border-bottom  1px solid lightgray  x000D          padding  5px  x000D        x000D       x000D      table  tr-show-sub   x000D          background   EAEAEA  x000D          cursor  pointer  x000D        x000D   x000D      table  tr-sub td   x000D          display  none  x000D        x000D       x000D      table  tr-sub td  div-sub   x000D          display  none  x000D        x000D   lt script src  https   code jquery com jquery-3 2 1 js  gt  lt  script gt  x000D   lt div class  wrapper  gt  x000D       lt table cellspacing  0  cellpadding  3  gt  x000D           lt thead gt  x000D               lt tr class  table  gt  x000D                   lt th gt col 1 lt  th gt  x000D                   lt th gt col 2 lt  th gt  x000D                   lt th gt col 3 lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr class  tr-show-sub  gt  x000D                   lt td gt col 1 lt  td gt  x000D                   lt td gt col 2 lt  td gt  x000D                   lt td gt col 3 lt  td gt  x000D               lt  tr gt  x000D               lt tr class  tr-sub  gt  x000D                   lt td colspan  5  gt  lt div class  div-sub  gt  x000D                  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis auctor tortor sit amet sem tempus rhoncus  Etiam scelerisque ligula id ligula congue semper interdum in neque  Vestibulum condimentum id nibh ac pretium  Proin a dapibus nibh  Suspendisse quis elit volutpat  aliquet nisi et  rhoncus quam  Quisque nec ex quis diam tristique hendrerit  Nullam sagittis metus sem  placerat scelerisque dolor congue eu  Pellentesque ultricies purus turpis  convallis congue felis iaculis sed  Cras semper elementum nibh at semper  Suspendisse libero augue  auctor facilisis tincidunt eget  suscipit eu ligula  Nam in diam at ex facilisis tincidunt  Fusce erat enim  placerat ac massa facilisis  tempus aliquet metus  Fusce placerat nulla sed tristique tincidunt  Duis vulputate vestibulum libero  nec lobortis elit ornare vel  Mauris imperdiet nulla non suscipit cursus  Sed sed dui ac elit rutrum mollis sed sit amet lorem   x000D                   lt  div gt  lt  td gt  x000D               lt  tr gt  x000D               lt tr class  tr-show-sub  gt  x000D                   lt td gt col 1 lt  td gt  x000D                   lt td gt col 2 lt  td gt  x000D                   lt td gt col 3 lt  td gt  x000D               lt  tr gt  x000D               lt tr class  tr-sub  gt  x000D                   lt td colspan  5  gt  lt div class  div-sub  gt  x000D                  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis auctor tortor sit amet sem tempus rhoncus  Etiam scelerisque ligula id ligula congue semper interdum in neque  Vestibulum condimentum id nibh ac pretium  Proin a dapibus nibh  Suspendisse quis elit volutpat  aliquet nisi et  rhoncus quam  Quisque nec ex quis diam tristique hendrerit  Nullam sagittis metus sem  placerat scelerisque dolor congue eu  Pellentesque ultricies purus turpis  convallis congue felis iaculis sed  Cras semper elementum nibh at semper  Suspendisse libero augue  auctor facilisis tincidunt eget  suscipit eu ligula  Nam in diam at ex facilisis tincidunt  Fusce erat enim  placerat ac massa facilisis  tempus aliquet metus  Fusce placerat nulla sed tristique tincidunt  Duis vulputate vestibulum libero  nec lobortis elit ornare vel  Mauris imperdiet nulla non suscipit cursus  Sed sed dui ac elit rutrum mollis sed sit amet lorem   x000D                   lt  div gt  lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt col 1 lt  td gt  x000D                   lt td gt col 2 lt  td gt  x000D                   lt td gt col 3 lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you need to slide and fade a table row at the same time  try using these   jQuery fn prepareTableRowForSliding   function          tr   this       tr children  td   wrapInner   lt div style  display  none     gt         return  tr      jQuery fn slideFadeTableRow   function speed  easing  callback         tr   this      if   tr is   hidden               tr show   find  td  gt  div   animate  opacity   toggle   height   toggle    speed  easing  callback         else            tr find  td  gt  div   animate  opacity   toggle   height   toggle    speed  easing  function                 tr hide                callback                          return  tr        document  ready function           tr special   hide   prepareTableRowForSliding           a toggle   toggle function             button     this            tr    button closest  tr special      this will be specific to your situation          tr slideFadeTableRow 300   swing   function                 button text  Hide table row                       function             button     this            tr    button closest  tr special      this will be specific to your situation          tr slideFadeTableRow 300   swing   function                 button text  Display table row

User · Answer

This code works    lt  DOCTYPE html gt    lt html lang  en  gt       lt head gt           lt meta charset  utf-8    gt           lt script src  http   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt           lt title gt  lt  title gt           lt script gt              function addRow                         displaynone   show                        displaynone td                    wrapInner   lt div class  innerDiv  style  height 0    gt                        div   animate   height   20px                            lt  script gt           lt style gt               mycolumn border  1px solid black                displaynone display  none            lt  style gt       lt  head gt       lt body gt           lt table align  center  width  50   gt               lt tr gt                   lt td class  mycolumn  gt Row 1 lt  td gt               lt  tr gt               lt tr gt                   lt td class  mycolumn  gt Row 2 lt  td gt               lt  tr gt               lt tr class  displaynone  gt                   lt td class  mycolumn  gt Row 3 lt  td gt               lt  tr gt               lt tr gt                   lt td class  mycolumn  gt Row 4 lt  td gt               lt  tr gt           lt  table gt           lt br gt           lt button onclick  addRow     gt add lt  button gt           lt  body gt   lt  html gt

User · Answer

Animations are not supported on table rows   From  Learning jQuery  by Chaffer and Swedberg       Table rows present particular   obstacles to animation  since browsers   use different values  table-row and   block  for their visible display   property   The  hide   and  show     methods  without animation  are always   safe to use with table rows   As of   jQuery version 1 1 3   fadeIn   and    fadeOut   can be used as well      You can wrap your td contents in a div and use the slideDown on that  You need to decide if the animation is worth the extra markup

User · Answer

Quick Easy Fix   Use JQuery  toggle   to show hide the rows onclick of either Row or an Anchor   A function will need to be written to identify the rows you would like hidden  but toggle creates the functionality you are looking for

User · Answer

I d like to add a comment to  Vinny s post but dont have the rep so have to post an answer     Found a bug with your plugin - when you just pass an object in with arguments they get overwritten if no other arguments are passed in  Easily resolved by changing the order the arguments are processed  code below  I ve also added an option for destroying the row after closing  only as I had a need for it        row id   slideRow  up   true      destroys the row   function           var sR             defaults                slideSpeed  400              easing  false              callback  false                    thisCallArgs                slideSpeed  400              easing  false              callback  false              destroyAfterUp  false                    methods                up  function  arg1  arg2  arg3                    if  typeof arg2     string                         sR thisCallArgs easing   arg2                    else if  typeof arg2     function                         sR thisCallArgs callback   arg2                    else if  typeof arg2     undefined                         sR thisCallArgs easing   sR defaults easing                                    if  typeof arg3     function                         sR thisCallArgs callback   arg3                    else if  typeof arg3     undefined   amp  amp  typeof arg2     function                         sR thisCallArgs callback   sR defaults callback                                    if  typeof arg1     object                         for  p in arg1                            sR thisCallArgs p    arg1 p                                           else if  typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                          sR thisCallArgs slideSpeed   arg1                    else if  typeof arg1     undefined   amp  amp   typeof arg1     boolean                          sR thisCallArgs destroyAfterUp   arg1                    else                       sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     var  row     this                   var  cells    row children  th  td                     cells wrapInner   lt div class  slideRowUp    gt                     var currentPadding    cells css  padding                     cellContentWrappers     this  find   slideRowUp                     cellContentWrappers slideUp sR thisCallArgs slideSpeed  sR thisCallArgs easing  parent   animate                       paddingTop   0px                       paddingBottom   0px                                           complete  function                                this  children   slideRowUp   replaceWith   this  children   slideRowUp   contents                               this  parent   css    display    none                                this  css    padding   currentPadding                                                               var wait   setInterval function                          if   cellContentWrappers is   animated       false                            clearInterval wait                           if  sR thisCallArgs destroyAfterUp                                                         row replaceWith                                                        if  typeof sR thisCallArgs callback     function                                 sR thisCallArgs callback call this                                                                      100                   return   this                              down  function  arg1  arg2  arg3                     if  typeof arg2     string                         sR thisCallArgs easing   arg2                    else if  typeof arg2     function                         sR thisCallArgs callback   arg2                    else if  typeof arg2     undefined                         sR thisCallArgs easing   sR defaults easing                                    if  typeof arg3     function                         sR thisCallArgs callback   arg3                    else if  typeof arg3     undefined   amp  amp  typeof arg2     function                         sR thisCallArgs callback   sR defaults callback                                    if  typeof arg1     object                         for  p in arg1                            sR thisCallArgs eval p    arg1 p                                           else if  typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                          sR thisCallArgs slideSpeed   arg1                    else                       sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     var  cells     this  children  th  td                     cells wrapInner   lt div class  slideRowDown  style  display none     gt                      cellContentWrappers    cells find   slideRowDown                      this  show                     cellContentWrappers slideDown sR thisCallArgs slideSpeed  sR thisCallArgs easing  function        this  replaceWith   this  contents                          var wait   setInterval function                          if   cellContentWrappers is   animated       false                            clearInterval wait                           if  typeof sR thisCallArgs callback     function                                 sR thisCallArgs callback call this                                                                      100                   return   this                                         fn slideRow   function  method  arg1  arg2  arg3            if  typeof method     undefined                 if  sR methods method                     return sR methods method  apply this  Array prototype slice call arguments  1                                      jQuery

User · Answer

Quick Easy Fix   Use JQuery  toggle   to show hide the rows onclick of either Row or an Anchor   A function will need to be written to identify the rows you would like hidden  but toggle creates the functionality you are looking for

User · Answer

I neded a table with hidden rows that slide in and out of view on row click    x000D   x000D      tr-show-sub   click function e      x000D      var elOne     this   x000D          tr-show-sub   each function key  value    x000D          var elTwoe     this   x000D           x000D          if elOne get 0      elTwoe get 0     x000D              if   this  next   tr-sub   hasClass  tr-sub-shown      x000D                  elTwoe next   tr-sub   removeClass  tr-sub-shown    x000D                  elTwoe next  tr   find  td   find  div   slideUp    x000D                  elTwoe next  tr   find  td   slideUp    x000D                x000D            x000D           x000D          if elOne get 0      elTwoe get 0     x000D              if elOne next   tr-sub   hasClass  tr-sub-shown      x000D                  elOne next   tr-sub   removeClass  tr-sub-shown    x000D                  elOne next  tr   find  td   find  div   slideUp    x000D                  elOne next  tr   find  td   slideUp    x000D                else   x000D                  elOne next   tr-sub   addClass  tr-sub-shown    x000D                  elOne next  tr   find  td   slideDown    x000D                  elOne next  tr   find  td   find  div   slideDown    x000D                x000D            x000D         x000D      x000D  body   x000D          background   eee  x000D        x000D       x000D       wrapper   x000D          margin  auto  x000D          width  50   x000D          padding  10px  x000D          margin-top  10   x000D        x000D       x000D      table   x000D          background  white  x000D          width  100   x000D        x000D       x000D      table th   x000D          background  gray  x000D          text-align  left  x000D        x000D       x000D      table th  td   x000D          border-bottom  1px solid lightgray  x000D          padding  5px  x000D        x000D       x000D      table  tr-show-sub   x000D          background   EAEAEA  x000D          cursor  pointer  x000D        x000D   x000D      table  tr-sub td   x000D          display  none  x000D        x000D       x000D      table  tr-sub td  div-sub   x000D          display  none  x000D        x000D   lt script src  https   code jquery com jquery-3 2 1 js  gt  lt  script gt  x000D   lt div class  wrapper  gt  x000D       lt table cellspacing  0  cellpadding  3  gt  x000D           lt thead gt  x000D               lt tr class  table  gt  x000D                   lt th gt col 1 lt  th gt  x000D                   lt th gt col 2 lt  th gt  x000D                   lt th gt col 3 lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr class  tr-show-sub  gt  x000D                   lt td gt col 1 lt  td gt  x000D                   lt td gt col 2 lt  td gt  x000D                   lt td gt col 3 lt  td gt  x000D               lt  tr gt  x000D               lt tr class  tr-sub  gt  x000D                   lt td colspan  5  gt  lt div class  div-sub  gt  x000D                  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis auctor tortor sit amet sem tempus rhoncus  Etiam scelerisque ligula id ligula congue semper interdum in neque  Vestibulum condimentum id nibh ac pretium  Proin a dapibus nibh  Suspendisse quis elit volutpat  aliquet nisi et  rhoncus quam  Quisque nec ex quis diam tristique hendrerit  Nullam sagittis metus sem  placerat scelerisque dolor congue eu  Pellentesque ultricies purus turpis  convallis congue felis iaculis sed  Cras semper elementum nibh at semper  Suspendisse libero augue  auctor facilisis tincidunt eget  suscipit eu ligula  Nam in diam at ex facilisis tincidunt  Fusce erat enim  placerat ac massa facilisis  tempus aliquet metus  Fusce placerat nulla sed tristique tincidunt  Duis vulputate vestibulum libero  nec lobortis elit ornare vel  Mauris imperdiet nulla non suscipit cursus  Sed sed dui ac elit rutrum mollis sed sit amet lorem   x000D                   lt  div gt  lt  td gt  x000D               lt  tr gt  x000D               lt tr class  tr-show-sub  gt  x000D                   lt td gt col 1 lt  td gt  x000D                   lt td gt col 2 lt  td gt  x000D                   lt td gt col 3 lt  td gt  x000D               lt  tr gt  x000D               lt tr class  tr-sub  gt  x000D                   lt td colspan  5  gt  lt div class  div-sub  gt  x000D                  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis auctor tortor sit amet sem tempus rhoncus  Etiam scelerisque ligula id ligula congue semper interdum in neque  Vestibulum condimentum id nibh ac pretium  Proin a dapibus nibh  Suspendisse quis elit volutpat  aliquet nisi et  rhoncus quam  Quisque nec ex quis diam tristique hendrerit  Nullam sagittis metus sem  placerat scelerisque dolor congue eu  Pellentesque ultricies purus turpis  convallis congue felis iaculis sed  Cras semper elementum nibh at semper  Suspendisse libero augue  auctor facilisis tincidunt eget  suscipit eu ligula  Nam in diam at ex facilisis tincidunt  Fusce erat enim  placerat ac massa facilisis  tempus aliquet metus  Fusce placerat nulla sed tristique tincidunt  Duis vulputate vestibulum libero  nec lobortis elit ornare vel  Mauris imperdiet nulla non suscipit cursus  Sed sed dui ac elit rutrum mollis sed sit amet lorem   x000D                   lt  div gt  lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt col 1 lt  td gt  x000D                   lt td gt col 2 lt  td gt  x000D                   lt td gt col 3 lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The plug offered by Vinny is really close  but I found and fixed a couple of small issues    It greedily targeted td elements beyond just the children of the row being hidden  This would have been kind of ok if it had then sought out those children when showing the row  While it got close  they all ended up with  display  none  on them  rendering them hidden  It didn t target child th elements at all  For table cells with lots of content  like a nested table with lots of rows   calling slideRow  up    regardless of the slideSpeed value provided  it d collapse the view of the row as soon as the padding animation was done  I fixed it so the padding animation doesn t trigger until the slideUp   method on the wrapping  is done    function         var sR             defaults                slideSpeed  400             easing  false             callback  false                   thisCallArgs               slideSpeed  400             easing  false             callback  false                   methods               up  function arg1  arg2  arg3                   if typeof arg1     object                        for p in arg1                           sR thisCallArgs eval p    arg1 p                                          else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                         sR thisCallArgs slideSpeed   arg1                   else                      sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     if typeof arg2     string                        sR thisCallArgs easing   arg2                   else if typeof arg2     function                        sR thisCallArgs callback   arg2                   else if typeof arg2     undefined                        sR thisCallArgs easing   sR defaults easing                                        if typeof arg3     function                        sR thisCallArgs callback   arg3                   else if typeof arg3     undefined   amp  amp  typeof arg2     function                        sR thisCallArgs callback   sR defaults callback                                        var  cells     this  children  td  th                     cells wrapInner   lt div class  slideRowUp    gt                     var currentPadding    cells css  padding                     cellContentWrappers     this  find   slideRowUp                     cellContentWrappers slideUp sR thisCallArgs slideSpeed  sR thisCallArgs easing  function                          this  parent   animate   paddingTop   0px   paddingBottom   0px                               complete  function                                  this  children   slideRowUp   replaceWith   this  children   slideRowUp   contents                                   this  parent   css    display    none                                    this  css    padding   currentPadding                                                                                           var wait   setInterval function                        if  cellContentWrappers is   animated       false                           clearInterval wait                           if typeof sR thisCallArgs callback     function                                sR thisCallArgs callback call this                                                                      100                                                                                                                       return   this                             down  function  arg1  arg2  arg3                   if typeof arg1     object                        for p in arg1                           sR thisCallArgs eval p    arg1 p                                          else if typeof arg1     undefined   amp  amp   typeof arg1     number     arg1     slow     arg1     fast                         sR thisCallArgs slideSpeed   arg1                   else                      sR thisCallArgs slideSpeed   sR defaults slideSpeed                                     if typeof arg2     string                        sR thisCallArgs easing   arg2                   else if typeof arg2     function                        sR thisCallArgs callback   arg2                   else if typeof arg2     undefined                        sR thisCallArgs easing   sR defaults easing                                        if typeof arg3     function                        sR thisCallArgs callback   arg3                   else if typeof arg3     undefined   amp  amp  typeof arg2     function                        sR thisCallArgs callback   sR defaults callback                                        var  cells     this  children  td  th                     cells wrapInner   lt div class  slideRowDown  style  display none     gt                      cellContentWrappers    cells find   slideRowDown                      this  show                     cellContentWrappers slideDown sR thisCallArgs slideSpeed  sR thisCallArgs easing  function       this  replaceWith    this  contents                          var wait   setInterval function                        if  cellContentWrappers is   animated       false                           clearInterval wait                           if typeof sR thisCallArgs callback     function                                sR thisCallArgs callback call this                                                                      100                   return   this                                         fn slideRow   function method  arg1  arg2  arg3           if typeof method     undefined                if sR methods method                    return sR methods method  apply this  Array prototype slice call arguments  1                                      jQuery

[jquery] How to Use slideDown (or show) function on a table row?

Examples related to jquery

Examples related to animation

Examples related to html-table

Examples related to slidedown