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.
JQuery doesn't have a reset() method, but native JavaScript does. So, we convert the jQuery element to a JavaScript object. JavaScript reset(): The reset() method resets the values of all elements in a form (same as clicking the Reset button).
Definition and Usage. The :reset selector selects button and input elements with type=reset. Tip: Using input:reset as a selector will not select the button element.
reset() method restores a form element's default values. This method does the same thing as clicking the form's <input type="reset"> control. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled .
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));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With