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.
Share Improve this question edited Dec 17, 2015 at 12:36 Venkat.R 7,7765 gold badges44 silver badges68 bronze badges asked Dec 17, 2015 at 12:07 OmniOwlOmniOwl 5,70919 gold badges71 silver badges122 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
1 Answer
Reset to default 13Easiest 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));