Wie setze ich eine HTML5-Tabelle mit jQuery zurück?

Question

Ich habe eine Tabelle in HTML geschrieben als solche:

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

Was mich ergibt dies:

Ich benutze this script die Tabelle interaktiv zu machen. Es funktioniert ganz gut, aber ich frage mich, wie ich den Tisch zurücksetzen würde, nachdem das Modal eingereicht oder geschlossen wurde? Ansonsten bleiben die gleichen Werte erhalten, wenn der Benutzer das Modal erneut öffnet.

Answer 1

Der einfachste Weg wäre es zu klonen, bevor es die Bearbeitung aber nach Plugin-Initialisierung:

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

Dann, wann immer Sie es zurücksetzen müssen, verwenden Sie:

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

EDIT mehrere Reseting zu handhaben , müssen Sie es klonen, wenn Sie es auch ersetzen, um nicht an futured redigierter Kopie zu arbeiten, zB:

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