Save dynamic table to LocalStorage

Question

I have a dynamic table in my webapplication. I want to save this table to the LocalStorage. I tried many things but nothing worked.

This is the HTML of the table:

 jQuery(document).delegate('a.add-record_alg', 'click', function(e) { e.preventDefault(); var content = jQuery('#sample_table_alg tr'), size = jQuery('#tbl_posts_alg >tbody >tr').length + 1, element = null, element = content.clone(); element.attr('id', 'rec_alg-' + size); element.find('.delete-record_alg').attr('data-id', size); element.appendTo('#tbl_posts_body_alg'); element.find('.sn').html(size); }); jQuery(document).delegate('a.delete-record_alg', 'click', function(e) { e.preventDefault(); var didConfirm = confirm("Ruimte verwijderen?"); if (didConfirm == true) { var id = jQuery(this).attr('data-id'); var targetDiv = jQuery(this).attr('targetDiv'); jQuery('#rec_alg-' + id).remove(); //regnerate index number on table $('#tbl_posts_body_alg tr').each(function(index) { //alert(index); $(this).find('span.sn').html(index + 1); }); return true; } else { return false; } });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="wellclearfix"> <a class="btn btn-primary pull-right add-record_alg" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a> </div> <div class="container-fluid" style="margin-left:1px ;"> <form enctype="multipart/form-data"> <table class="table table-stripped" id="tbl_posts_alg"> <thead style="background-color:#c7c8cc;"> <tr> <th style="width: 100px ;">Nummer</th> <th style="width: 350px;">Naam</th> <th>Gebruiksfunctie</th> <th>Gebruiksoppervlakte [m2]</th> <th style="width: 111px;">Verwijderen</th> </tr> </thead> <tbody id="tbl_posts_body_alg"> <tr id="rec_alg-1"> <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td> <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td> <td> <label for="functie"> </label> <select class="functiedropdown" name="Functie" id="functie"> <option value="verkeersruimte">selecteer een functie!</option> <option value="verkeersruimte">verkeersruimte</option> <option value="meterruimte">meterruimte</option> <option value="toiletruimte">toiletruimte</option> <option value="verblijfsruimte">verblijfsruimte</option> <option value="verblijfsruimte">techniekruimte</option> <option value="verblijfsruimte">bergruimte</option> <option value="verblijfsruimte">wasruimte</option> <option value="verblijfsruimte">badruimte</option> <option value="verblijfsruimte">onbenoemde ruimte</option> </select> </td> <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td> <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td> </tr> </tbody> </table> </div> </form> <div style="display:none;"> <table id="sample_table_alg"> <tr id=""> <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td> <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td> <td> <label for="functie"> </label> <select class="functiedropdown" name="Functie" id="functie"> <option value="verkeersruimte">selecteer een functie!</option> <option value="verkeersruimte">verkeersruimte</option> <option value="meterruimte">meterruimte</option> <option value="toiletruimte">toiletruimte</option> <option value="verblijfsruimte">verblijfsruimte</option> <option value="verblijfsruimte">techniekruimte</option> <option value="verblijfsruimte">bergruimte</option> <option value="verblijfsruimte">wasruimte</option> <option value="verblijfsruimte">badruimte</option> <option value="verblijfsruimte">onbenoemde ruimte</option> </select> </td> <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td> <td><a class="btn btn-xs delete-record_alg" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td> </tr> </table> </div> </div> </div>

preferably i want to store the table to the LocalStorage per table data, because i need some values later again on a different page. I tried saving the whole table to the LocalStorage which is possible, but what i said, i need the table data's later again.

Can someone please help me out? (i hope i explained it well xD)

Thanks in advance!

Answer 1

1. delegate is deprecated. Just use .on - note I added the .on to the table in the delete
2. Please be consistent with jQuery/$
3. I store the DOM outerHTML.
4. You will need to ALSO delegate where you decide to render the table again

 const $table = $("#tbl_posts_alg"); const addToStorage = () => { // localStorage.setItem("table",$table[0].outerHTML); // UNCOMMENT ON YOUR SERVER console.log($table[0].outerHTML); //SO does not allow localStorage in snippets }; $(document).on('click','a.add-record_alg', function(e) { e.preventDefault(); var content = $('#sample_table_alg tr'), size = $('#tbl_posts_alg >tbody >tr').length + 1, element = null, element = content.clone(); element.attr('id', 'rec_alg-' + size); element.find('.delete-record_alg').attr('data-id', size); element.appendTo('#tbl_posts_body_alg'); element.find('.sn').html(size); addToStorage() }); $table.on('click','a.delete-record_alg', function(e) { e.preventDefault(); var didConfirm = confirm("Ruimte verwijderen?"); if (didConfirm) { var id = $(this).attr('data-id'); var targetDiv = $(this).attr('targetDiv'); $('#rec_alg-' + id).remove(); //regnerate index number on table $('#tbl_posts_body_alg tr').each(function(index) { //alert(index); $(this).find('span.sn').html(index + 1); }); addToStorage(); } return didConfirm; });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="wellclearfix"> <a class="btn btn-primary pull-right add-record_alg" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a> </div> <form enctype="multipart/form-data"> <div class="container-fluid" style="margin-left:1px ;"> <table class="table table-stripped" id="tbl_posts_alg"> <thead style="background-color:#c7c8cc;"> <tr> <th style="width: 100px ;">Nummer</th> <th style="width: 350px;">Naam</th> <th>Gebruiksfunctie</th> <th>Gebruiksoppervlakte [m2]</th> <th style="width: 111px;">Verwijderen</th> </tr> </thead> <tbody id="tbl_posts_body_alg"> <tr id="rec_alg-1"> <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td> <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td> <td> <label for="functie"> </label> <select class="functiedropdown" name="Functie" id="functie"> <option value="verkeersruimte">selecteer een functie!</option> <option value="verkeersruimte">verkeersruimte</option> <option value="meterruimte">meterruimte</option> <option value="toiletruimte">toiletruimte</option> <option value="verblijfsruimte">verblijfsruimte</option> <option value="verblijfsruimte">techniekruimte</option> <option value="verblijfsruimte">bergruimte</option> <option value="verblijfsruimte">wasruimte</option> <option value="verblijfsruimte">badruimte</option> <option value="verblijfsruimte">onbenoemde ruimte</option> </select> </td> <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td> <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td> </tr> </tbody> </table> </div> </form> <div style="display:none;"> <table id="sample_table_alg"> <tr id=""> <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td> <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td> <td> <label for="functie"> </label> <select class="functiedropdown" name="Functie" id="functie"> <option value="verkeersruimte">selecteer een functie!</option> <option value="verkeersruimte">verkeersruimte</option> <option value="meterruimte">meterruimte</option> <option value="toiletruimte">toiletruimte</option> <option value="verblijfsruimte">verblijfsruimte</option> <option value="verblijfsruimte">techniekruimte</option> <option value="verblijfsruimte">bergruimte</option> <option value="verblijfsruimte">wasruimte</option> <option value="verblijfsruimte">badruimte</option> <option value="verblijfsruimte">onbenoemde ruimte</option> </select> </td> <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td> <td><a class="btn btn-xs delete-record_alg" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td> </tr> </table> </div> </div> </div>

Answer 2

[name] Attribute

In the example, there are 4 [name] s given to the form controls of each row:

• nummer
• naam
• functie
• inputtext

The [name] attribute is used by various APIs to identify groups of form controls so they can be easily grouped for specific behavior (ex. radio button groups) or collecting their values, etc. Also, an #id was assigned to <form id='data'>

When reviewing the example,

1. add a couple of rows and enter some data in the form controls (leave a couple of them empty).

2. click the Save button.

3. the console should have an object:

{
  nummer: ['value from row1', 'value from row2', '','value from row4'],
  naam: ['', 'value from row2', 'value from row3', ''],
  functie: ['verblijfsruimte', 'toiletruimte', 'verkeersruimte', 'verblijfsruimte'],
  inputtext: ['', '', 'value from row3', 'value from row4'],
  size: 4
}

The property "size" is the number of <tr> that '#tbl_posts_body_alg' had when the data was extracted which is useful should you need to load the data from localStorage and render a <table> for the data. Note, that the actual line that calls a function that utilizes localStorage has been commented out. The reason why is because SO prohibits its use, so uncomment it when testing anywhere but here on SO. I did not write a function that loads the form data and renders html because there wasn't anything specific about the other page you intend to add the data to.

Details are commented in example

 jQuery(document).delegate('a.add-record_alg', 'click', function(e) { e.preventDefault(); var content = jQuery('#sample_table_alg tr'), size = jQuery('#tbl_posts_alg >tbody >tr').length + 1, element = null, element = content.clone(); element.attr('id', 'rec_alg-' + size); element.find('.delete-record_alg').attr('data-id', size); element.appendTo('#tbl_posts_body_alg'); element.find('.sn').html(size); }); jQuery(document).delegate('a.delete-record_alg', 'click', function(e) { e.preventDefault(); var didConfirm = confirm("Ruimte verwijderen?"); if (didConfirm == true) { var id = jQuery(this).attr('data-id'); var targetDiv = jQuery(this).attr('targetDiv'); jQuery('#rec_alg-' + id).remove(); //regnerate index number on table $('#tbl_posts_body_alg tr').each(function(index) { //alert(index); $(this).find('span.sn').html(index + 1); }); return true; } else { return false; } }); /** * @desc - Saves stringified data to localStorage * @param {string} key - A string that the data will be stored under * @param {any} data - Any type except functions are allowed to be stored */ const saveData = (key, data) => localStorage.setItem(key, JSON.stringify(data)); /** * @desc - Loads parsed data from localStorage * @param {string} key - A string that the data is stored under * @return {any} - Any data stored under given key */ const loadData = key => JSON.parse(localStorage.getItem(key)); /** * @desc - Extracts name/value from each form control of a given <form> * @param {string} formIdName - An id or name of a <form> * @return {object} - An object of [name]: [value, value,...] */ function xData(formIdName) { const form = document.forms[formIdName]; const data = new FormData(form); let result = {}; for (let [name, value] of data) { if (!result[name]) { result[name] = []; } result[name].push(value); } return result; } $('.save').on('click', function() { let x = xData('data'); let size = $('#tbl_posts_body_alg tr').length; x.size = size; console.log(x); /* localStorage is disabled on SO, uncomment the line when using within an environment where localStorage is permitted *//* saveData('data', x); */ });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <div class="wellclearfix"> <a class="btn btn-primary pull-right add-record_alg" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a> <button class='save btn btn-danger' type='button'>Save</button> </div> <div class="container-fluid" style="margin-left:1px ;"> <form id='data' enctype="multipart/form-data"> <table class="table table-stripped" id="tbl_posts_alg"> <thead style="background-color:#c7c8cc;"> <tr> <th style="width: 100px ;">Nummer</th> <th style="width: 350px;">Naam</th> <th>Gebruiksfunctie</th> <th>Gebruiksoppervlakte [m2]</th> <th style="width: 111px;">Verwijderen</th> </tr> </thead> <tbody id="tbl_posts_body_alg"> <tr id="rec_alg-1"> <td><input class="inputtext" type="text" name="nummer" placeholder="Nummer"> </td> <td><input class="inputtext" type="text" name="naam" placeholder="Naam"> </td> <td> <label for="functie"> </label> <select class="functiedropdown" name="functie" id="functie"> <option value="verkeersruimte">selecteer een functie!</option> <option value="verkeersruimte">verkeersruimte</option> <option value="meterruimte">meterruimte</option> <option value="toiletruimte">toiletruimte</option> <option value="verblijfsruimte">verblijfsruimte</option> <option value="verblijfsruimte">techniekruimte</option> <option value="verblijfsruimte">bergruimte</option> <option value="verblijfsruimte">wasruimte</option> <option value="verblijfsruimte">badruimte</option> <option value="verblijfsruimte">onbenoemde ruimte</option> </select> </td> <td><input class="inputtext" type="text" name="inputtext" placeholder="[m2]"></td> <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td> </tr> </tbody> </table> </form> <div style="display:none;"> <table id="sample_table_alg"> <tr id=""> <td><input class="inputtext" type="text" name="nummer" placeholder="Nummer"> </td> <td><input class="inputtext" type="text" name="naam" placeholder="Naam"> </td> <td> <label for="functie"> </label> <select class="functiedropdown" name="functie" id="functie"> <option value="verkeersruimte">selecteer een functie!</option> <option value="verkeersruimte">verkeersruimte</option> <option value="meterruimte">meterruimte</option> <option value="toiletruimte">toiletruimte</option> <option value="verblijfsruimte">verblijfsruimte</option> <option value="verblijfsruimte">techniekruimte</option> <option value="verblijfsruimte">bergruimte</option> <option value="verblijfsruimte">wasruimte</option> <option value="verblijfsruimte">badruimte</option> <option value="verblijfsruimte">onbenoemde ruimte</option> </select> </td> <td><input class="inputtext" type="text" name="inputtext" placeholder="[m2]"></td> <td><a class="btn btn-xs delete-record_alg" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td> </tr> </table> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>