How to reset HTML5 table with jQuery?

Question

I have a table in HTML written as such:

<table id="spreadsheet" class="table table-striped" cellspacing="0" width="100%"> <thead> <tr> <th id="spreadsheet-year">2015</th> <th>Month (Est)</th> <th>Month (Act)</th> <th>YTD (Est)</th> <th>YTD (Act)</th> <th>Full Year (Est)</th> <th>Full Year (Act)</th> </tr> </thead> <tbody> <tr> <td>Jan</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>Feb</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>Mar</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>Apr</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> ... ... ... </tbody> </table> 

What gives me this:

I use this script to make the table interactive. This works very well, but I wonder how am I going to reload the table after sending or closing the modal? Otherwise, the same values ​​are saved when the user opens the modal again.

Answer 1

The easiest way is to clone it before editing it, but after the plugin is initialized:

 var $defaultTable = $('#spreadsheet').clone(true); 

Then, when you need to reset, use:

 $('#spreadsheet').replaceWith($defaultTable); 

EDIT To process multiple resets, you need to clone it when replacing it, so as not to work with a modified version of futur, for example:

 $('#spreadsheet').replaceWith($defaultTable.clone(true));