Making sections of an html table fixed using jQuery

Question

I have an HTML table which is dynamically populated from data fetched from a server. Since I don't know the schema or the number of rows before hand, I have its, and its row's & cell's position defined as relative. Now once the table is populated, I want to delete a set of rows from it(specified by an array of row indexes). I am trying for the following animation for these row deletions. The rows which are supposed to be deleted fade out leaving blank space in the table.->The other rows slide up to fill the space created between them.

I have tried out following things:

1. Simply fading out or sliding up the rows to be deleted using jquery. The problem with this is, the animation is jerky, and all I can see is the bunch of rows disappearing at once.

2. Setting the 'position' of all other rows except the ones to be deleted as fixed, Fading out the rows to be deleted, and then sliding up the rows which were fixed. The problem with this is - Since the rows were relatively placed, once I make them fixed they all lose all their previous styles, contract, and lose the well defined structure and overwriting each other. What would be the best way to implement the required kind of animation?

Also, how would one go about specifying a bunch of rows (specified by a list of indexes) for a jQuery selector. Right now I am creating the tr:nth-of-type(i) selector for each element of the list, and concatenating them in a large string separated by ',', and using this as the selector for all the rows. Is there a better way to do this?

Answer 1

jsBin demo

Don't animate table elements. Ever.
Instead animate DIV elements inside your row cells. Once they faded out and animated to height 0 , than you're free to remove the parent TR

Example:

 $("button").on("click", function(){ // Table with no DIV elements (Animate ROWS) $("#noDivs tr:eq(1)").animate({opacity:0}, 800, function(){ $(this).slideUp(); }); // Table with DIVs (Animate DIV) $("#divs tr:eq(1) div").animate({opacity:0}, 800, function(){ $(this).slideUp(); }); }); 

 table{ border-collapse: separate; border-spacing: 0px; } table td{ padding:0; margin:0; } table#noDivs td, table#divs div{ border:1px solid #ddd; padding:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Delete rows 2</button> <br><br> Animate DIV instead: <table id="divs"> <tr> <td><div>Cell 1</div></td> <td><div>Cell 2</div></td> <td><div>Cell 3</div></td> <td><div>Cell 4</div></td> </tr> <tr> <td><div>Cell 1</div></td> <td><div>Cell 2</div></td> <td><div>Cell 3</div></td> <td><div>Cell 4</div></td> </tr> <tr> <td><div>Cell 1</div></td> <td><div>Cell 2</div></td> <td><div>Cell 3</div></td> <td><div>Cell 4</div></td> </tr> <tr> <td><div>Cell 1</div></td> <td><div>Cell 2</div></td> <td><div>Cell 3</div></td> <td><div>Cell 4</div></td> </tr> </table> Animate TR (Issue) <table id="noDivs"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> 

Answer 2

you should add/remove a class and use CSS to animate.

here an example (only css for test ONLY) to see how it would/could work

 table { width:600px; border:solid; } td { border:solid; } /* demo purpose , instead js */ td { pointer-events:none; font-size:1.2em; opacity:1; } tr:focus td { font-size:0; border:solid 0 transparent; opacity:0; transition:1s;/*with steps or css animation is fine too */ } 

 <table> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> <tr tabindex="0"> <td>hide</td> <td>my</td> <td>row</td> </tr> </table>