javascript - 如何使用 jQuery 重置 HTML5 表格？

Question

我有一个这样写的 HTML 表格:

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

这给了我这个:

我使用 this script使表格具有交互性。它工作得很好，但我想知道在提交或关闭模式后如何重置表格？否则，当用户再次打开模式时，相同的值将持续存在。

Answer 1

最简单的方法是在编辑之前克隆它，但在插件初始化之后:

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

然后每当你需要重置它时，使用:

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

EDIT 要处理多次重置，您也需要在替换它时克隆它，以免在未来编辑的副本上工作，例如:

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