0

I have a demo of what I'm trying to explain working in Code Pen here: https://codepen.io/vonroga/pen/gOgWjdj

I have a basic table:

<table>
    <tbody>
        <tr>
            <td>Cell Contents</td>
            <td class="del">x</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td class="del">x</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td class="del">x</td>
        </tr>
    </tbody>
</table>

Using JavaScript/jQuery I want to use the slideUp() jQuery animation to hide a table row after clicking on a delete button in that row. However, no animation plays on the table row (see Code Pen linked above).

$('td.del').on('click', e => delCel(e));

function delCel(e) {
  // What I want to work:
  // $(e.target).parent().slideUp(1000);
  // What actually Works:
  $(e.target).parent().hide(1000);
}

For slideUp(), the animation doesn't play and after the timeout the element just disappears suddenly. At least hide() fades the text and cell borders until, once it's hidden, the row pops out of the table abruptly.

So how do I get the table row to slide up, like it's moving under the row above it, and drag the elements in the table below that row up along with it for a smooth animation? My guess is jQuery just isn't quite capable of doing this, so if I have to use something else, I guess that's the way I'll go.

Feel free to suggest a way to do it in CSS/JS instead if that's ultimately easier.

  • Check out this answer https://stackoverflow.com/questions/37375625/how-to-animate-toggling-of-table-rows That can definitely get you on the way. – BoomshakalakaNL Apr 04 '21 at 00:31

1 Answers1

0
table,
tr, td{
  border: 1px solid black;
}

table {
  min-height:200px;
}

td.del {
  padding: 3px 8px;
  cursor: pointer;
}

but it may not what you expected.

user1587368
  • 314
  • 2
  • 6