如何使用jQuery重置HTML5表格？

Question

我寫這樣的HTML表：

<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>

，給了我這樣的：

我用this script使表互動。它工作的很好，但我想知道如何在模式提交或關閉後重新設置表格？否則，當用戶再次打開模式時，相同的值將會持續。

Answer 1

最簡單的辦法是修改之前，但插件初始化後，克隆它：

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

然後，每當你需要重新設置，使用：

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

編輯要處理多個正在重置，你需要克隆它以太取代它時，不工作就即將成爲編輯的副本，如：

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