Export/Import Dynamically changing Table info with Javascript

Question

Edit: I just learned about JSFiddle, so here it is if this helps. Any help is greatly appreciated.

I am just starting out and I have created a page that the user can open up a form to add/remove/edit data in a table. Code below:

HTML:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/stylesheet.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

</head>

<body>

  <main>
      <div class="container">
        <div class="col-sm-6" style="float: left;">
            <h2>Contacts/Scheduling</h2>
        </div>
        <div style="float: right; margin-top: 27px;">
          <button id="contactNumbers">Contact Info/Numbers</button>
        </div>
      </div>
        <table id="contactTable">
          <thead>
            <tr id = "row1">
              <th id = "sortTable" onclick="sortTable(0)">Name &#8597;</th>
              <th style="width: 100px;">EXT</th>
              <th style="width: 300px;">Returning Time</th>
              <th style="width: 300px;">Returning Date</th>
              <th style="width: 70px;">Out</th>
              <th style="width: 100px;">Reset</th>
              <th style="width: 600px;">Booked</th>
              
            </tr>
          </thead>
        </table>
      </div>


    <div>
      <button id = "addButton" type="button" onclick="myFunction()">Add Contact</button>
      <button id = "editButton" type="button" onclick="editContacts()">Edit Contacts</button>
      <button id = "removeButton" type="button" onclick = "removeContacts()">Remove Contacts</button>
    </div>

    <div class="form-popup" id="myForm">
      <form class="form-container">
        <h1>Add Contact</h1>

        <label for="name"><b>Name</b></label>
        <input id = "name" type="text" placeholder="Enter Employee name" name="name" required>

        <label for="ext"><b>Extension</b></label>
        <input id = "ext" type="text" placeholder="Enter EXT" name="EXT" required>

        <label for="number"><b>Contact Number</b></label>
        <input id = "number" type="tel" placeholder="Enter Contact Number" name="Contact Number" required>

        <button type="button" class="btn" onclick="addInfo(), sortTableDes()">Add</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
      </form>
    </div>

Javascript:

<script>
      function addInfo() {
        var table = document.getElementById("contactTable");
        var row = table.insertRow(1);

        var cells = [];
        for (var i = 0; i < 7; i++) {
          cells[i] = row.insertCell(i);
        }

        table.rows[1].setAttribute("style", "height:10px");


        var info1 = document.getElementById("name").value;
        var info2 = document.getElementById("ext").value;

        var infoForms = [];
        for (var i = 0; i <= 4; i++) {
          infoForms[i] = document.createElement("form");
        }
        

        cells[0].innerHTML = info1;
        cells[1].innerHTML = info2;

        var info3input = document.createElement("input");
        info3input.setAttribute("type", "time");
        info3input.setAttribute("id", "timePickChange");
        infoForms[0].appendChild(info3input);
        cells[2].appendChild(infoForms[0]);

        var info4input = document.createElement("input");
        info4input.setAttribute("type", "date");
        info4input.setAttribute("id", "datePickChange");
        infoForms[1].appendChild(info4input);
        cells[3].appendChild(info4input);

        var info5input = document.createElement("input");
        info5input.setAttribute("type", "checkbox");
        info5input.setAttribute("onclick", "checkIfOutValue(this)");
        infoForms[2].appendChild(info5input);
        infoForms[2].setAttribute("onclick", "checkIfOutRow(this)");
        cells[4].appendChild(infoForms[2]);

        var info7input = document.createElement("button");
        info7input.innerHTML = "Reset";
        info7input.setAttribute("onclick", "clearForm(this)");
        info7input.setAttribute("id", "buttonClear");
        cells[5].appendChild(info7input);

        var info8input = document.createElement("textarea");
        info8input.setAttribute("rows", "1");
        info8input.setAttribute("cols", "75");
        infoForms[4].appendChild(info8input);
        cells[6].appendChild(info8input);
      }

      function myFunction() {
        document.getElementById("myForm").style.display = "block";  
        document.getElementById("name").value = "";
        document.getElementById("ext").value = "";
        document.getElementById("number").value = "";
        }

      function closeForm() {
        document.getElementById("myForm").style.display = "none";
        document.getElementById("name").value = "";
        document.getElementById("ext").value = "";
        document.getElementById("number").value = "";
        } 

    </script>

I am really hoping someone can help me with importing/exporting. I want to make sure this data is saved to a server (or locally), and the next time the page is loaded, it will important that table info back into the table.

Any help would be greatly appreciated.

Answer 1

Let's start with where to store the info. You have a lot of options:

Cookies: Ideal for small amounts of information which does not require reliability, such as session IDs or light/dark theme preferences
LocalStorage/IndexedDB: Ideal for larger amounts of structured information which does not require reliability or portability. If the information you are storing would need to be kept for a long time or used between devices, these are not optimal.
Server-side database: Ideal for larger amounts of structured information which requires reliability or access between devices. This would be best for something like a contacts app, but it has the disadvantage of requiring extra infrastructure and maintainence.

If you want to learn more about cookies, check out: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies .

If you want to learn more about LocalStorage (and its sister SessionStorage), check out: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

I'll assume you want to go with the last option. You'll need some sort of page on your server, which can take the information sent by the client and store it. There are literally hundreds of languages, frameworks, and databases for this, so I'm not going to cover any in particular here.

For the front end, which seems to be your main concern, you could send the information using a form, likely with a hidden input :

<form id="form" method="POST" action="/path/to/storage/page.xyz">
    <input type="hidden" id="hidden-input" name="contacts" value=""/>
</form>

...

var form = document.getElementById("form");
var hidden = document.getElementById("hidden-input");

hidden.value = /* Whatever data you want to send */;
form.submit();

...

If this doesn't include some of the information you needed, leave a comment and I'll clarify. Good luck with your project!

Export/Import Dynamically changing Table info with Javascript

Question

1 answers

solution1
0 2020-10-28 20:55:00

Export/Import Dynamically changing Table info with Javascript

Question

1 answers

solution1 0 2020-10-28 20:55:00

solution1
0 2020-10-28 20:55:00