Dynamic HTML Table That Saves Content!

[domdag27]

Hey guys,  I'm new to programming and I am working on a little project I thought of. I'm trying to create a study logger that you can update and it saves into local storage, so that when you reload the page it saves your old entries and you can view your personal log. So far, I have it working as far as adding/deleting entries.

My issue is that I cannot get the table to save in the browser's local storage, I think because it saves an object. I've read on other posts that I can somehow stringify it, and then parse it? But I've tried that and didn't have any luck. I might have been doing it wrong though. Let me know what you think. I am new to programming so I'm sorry if my code is hard to read! Let me know if you need any clarification. I really appreciate any help. I am open to other ways to tackle this project! I really want to finish this.

Here's my code if you want to take a look:

HTML:
<form id="tracker" action="" method="post">
  <label>Hours worked:<br></label>
  <input type="number" name="hours" id="hours"><br>
  <label>Date:<br></label>
  <input type="date" name="date" id="date"><br><br>
  <label>What did you get done?:<br></label><br>
  <textarea id="accomplished" name="accomplished"></textarea><br>
<button id="submit-btn" onclick="localStore()">Submit!</button>
</form>

<-- Table to display logged entries -->
<div class="container">
 <br>
 <h2>Your Log:</h2>
 <br>           
<table id="myLog" class="table table-bordered">
 <thead>
  <tr>
    <th>Date</th>
    <th>What you did</th>
    <th>Hours Studied</th>
    <th>Delete Row</th>
  </tr>
 </thead>
<tbody>
</tbody>
</table>
</div>

 

 

 

JS and jQuery:
//Stops button from refreshing page
$("#submit-btn").click( function(event) {
 event.preventDefault();
});

//Delete button

var deleteBtn = '<input id="delete-row-btn" type="button" value="X" 
onclick="deleteRow(this)"/>';

//Delete button code
function deleteRow(btn) {
    var row = btn.parentNode.parentNode;
    row.parentNode.removeChild(row);
}


//Probably a very inefficient way of adding elements to the table!

function localStore() {
    var hours = document.getElementById('hours').value;
    var date = document.getElementById('date').value;
    var accomplished = document.getElementById('accomplished').value;

    localStorage.setItem("hours", hours);
    localStorage.setItem("date", date);
    localStorage.setItem("accomplished", accomplished);

    var table = document.getElementById("myLog");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = localStorage.date;
    cell2.innerHTML = localStorage.accomplished;
    cell3.innerHTML = localStorage.hours;
    cell4.innerHTML = deleteBtn;
}

[administrator]

Hmm ... have you checked to be sure you have the browser permissions to save to local storage?

[domdag27]

I've tested the browser by setting and getting items from local storage between refreshes.  I believe my problem is that I was trying to save the entire table as a local storage property.  From what I've read, you cannot save the entire table as a property because it is not a string, so you have to stringify it, and then parse it. I think that is the part that I am messing up on. Still playing around with it.

[administrator]

I haven't used local storage, so I am taking a stab in the dark here. Could you save you information to a JSON structured object and try to save that?

S

[Kwisatsoundman]

Hello domdag27,

Here is a little program that solves your problem. You can test it by using the three files (test.html, screen.css and local-storage2.js) I've attached to my reply.
It can of course be further improved, for example by checking that no two tasks have the same identifier before being added and displayed in your table.

As a general rule of thumb, you should always split up your JavaScript programs into several parts (= or little functions) to write it and improve it more easily. You'll see that in this one, there is seven little functions each dedicated to a specific purpose. 

I've commented out as much as I could this javascript program. Enjoy!

 

local-storage2.js

screen.css

test.html

[rio]

 

On 11/6/2017 at 8:46 PM, Kwisatsoundman said:

Hello domdag27,

Here is a little program that solves your problem. You can test it by using the three files (test.html, screen.css and local-storage2.js) I've attached to my reply.
It can of course be further improved, for example by checking that no two tasks have the same identifier before being added and displayed in your table.

As a general rule of thumb, you should always split up your JavaScript programs into several parts (= or little functions) to write it and improve it more easily. You'll see that in this one, there is seven little functions each dedicated to a specific purpose. 

I've commented out as much as I could this javascript program. Enjoy!

 

local-storage2.js

screen.css

test.html

hello....the above links are not accessible...

I want to persist  dynamic table data..so how can I do this