javascript - How do I reset an HTML5 table with jQuery? - Stack Overflow

admin管理员组

文章数量:1384850

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>

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>

Which gives me this:

I use this script to make the table interactive. It works quite nicely, but I'm wondering how I'd go about resetting the table after the modal is submitted or closed? Otherwise the same values will persist when the user opens the modal again.

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Dec 17, 2015 at 12:36 Venkat.R 7,77655 gold badges4444 silver badges6868 bronze badges asked Dec 17, 2015 at 12:07 OmniOwlOmniOwl 5,7091919 gold badges7171 silver badges122122 bronze badges 1

• this $("td").val("0"); ? If you want for specific cells then add a class say, class="resetCellClass" then $(".resetCellClass").val("0"); – Zeus Commented Dec 17, 2015 at 12:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

Easiest way would be to clone it before editing it but after plugin initialization:

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

Then whenever you need to reset it, use:

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

EDIT To handle multiple reseting, you need to clone it when replacing it too in order to not work on futur edited copy, e.g:

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

本文标签： javascriptHow do I reset an HTML5 table with jQueryStack Overflow