How to use "object HTMLTableElement"

Question

I got a table on my site which I want to save in the session storage and replace it on button click (discard changes). Seems to work well to save it in session storage, but now I dont know how to make it usable for my HTML, that I can replace the current table with the table in my storage.

Tried to convert it with this , but I only got this:

I hoped that I can store it like this: [ table output2 and just set it later on.

This is my current code.

    $(document).ready(function () {
        let table = document.querySelector('.overallTable');  
        sessionStorage.setItem('init', JSON.stringify(table));

        document.getElementById("dcChanges").addEventListener("click", function () {                                            
            if (sessionStorage.getItem('init') == sessionStorage.getItem('cache')) {console.log("equal")}
        });

        document.getElementById("saveInCache").addEventListener("click", function () {
            document.getElementsByClassName('overallTable');
            sessionStorage.setItem('cache', table);
            console.log(table);
            console.log("Output: Table: " + sessionStorage.getItem('cache'));
            console.log("Output: Converted: " + JSON.stringify(sessionStorage.getItem('cache')));
        });
      });

I hoped I just could do something like this document.getElementsByClassName("overallTable").innerHTML = sessionStorage.getItem('cache');

Don't recommend to store html element in localStorage. That being said you could use element.outerHTML to get the table as a string. I would say to store the data that makes up the table and rebuild the table after retrieving this said data — shrys, Feb 03 '23 at 13:09
Keep in mind that the HTML is then really stored in the browsers of your visitors. If you change the website layout they will have the old HTML in their storage and it may break the layout if you are not careful in all new versions of the site. You should rather store *data* that the element / your HTML table is made out of. — Peter Krebs, Feb 03 '23 at 14:05

score 2 · Answer 1 · answered Feb 03 '23 at 13:37

2

You can use html() function of jQuery.

$('.overallTable').html();

answered Feb 03 '23 at 13:37

bluestar0505

338
1
14

score 1 · Answer 2 · edited Feb 03 '23 at 13:56

1

try document.getElementsByClassName('overallTable')[0].innerHTML

edited Feb 03 '23 at 13:56

freedomn-m

27,664
8
35
57

answered Feb 03 '23 at 13:18

Code Genie

21
7

How to use "object HTMLTableElement"

2 Answers2