Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I reset an HTML5 table with jQuery?

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:

enter image description here

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.

like image 510
OmniOwl Avatar asked Dec 17 '15 12:12

OmniOwl


People also ask

How we can reset form in jQuery?

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

What is reset in jQuery?

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.

How do I reset form data?

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 .


1 Answers

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));
like image 141
A. Wolff Avatar answered Sep 24 '22 15:09

A. Wolff