如何使用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>

这给了我这个:

我使用这个脚本使表交互.它工作得非常好,但我想知道在提交或关闭模态后如何重置表格？否则,当用户再次打开模态时,相同的值将保持不变.

Answer 1

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

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

然后,无论何时需要重置它,请使用:

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

编辑要处理多次重置,您需要在替换它时克隆它,以便不能在未来编辑的副本上工作,例如:

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