Add new row at each HTML page load with Javascript

Question

I've got a really basic HTML page that simply displays a table. I'm trying the below code so that I can add a new row to the bottom of the table each time the page is loaded (even if it's the same data for now). However, each time I load the page, the bottom element keeps getting overridden with the same data. I am trying to do something like this example on W3 Schools (without the button, but the same concept).

My code is as follows:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table id="table" style="width:70%; text-align: center;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Row</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<script>

    function myFunction() {
        var table = document.getElementById("table");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = "NEW CELL1";
        cell2.innerHTML = "NEW CELL2";
        cell3.innerHTML = "NEW CELL3";
    };

    myFunction();

</script>

</body>
</html>

I've also tried replacing myFunction above with document.addEventListener("DOMContentLoaded", function(){...}, but that hasn't solved my issue either.

liakoyras · Answer 1 · 2019-07-23T09:45:24.027

1

JavaScript will not make permanent changes in your HTML files.
This means that after you load the page, your HTML code will be displayed and then the function will be executed, adding a new row.
After you reload again, the same process will happen, and the row will be added after the end of your second HTML row.
It doesn't matter whether you use the simple method on your code or the other one you suggest (with document.addEventListener), this function is bound to be executed only once and will not add more than one row.

edited Jul 23 '19 at 09:45

answered Jul 23 '19 at 09:40

liakoyras

1,101
12
27

Thanks for your answer. What about making changes so that the Javascript code is run after the page is loaded. Would that be possible and if so, solve my problem? – Adam Jul 23 '19 at 09:46
Your JS code is already running after the page loads. What do you mean? – liakoyras Jul 23 '19 at 09:48
Hmm, maybe I'm confusing things a little bit. I guess it's not a matter of when the script is run, but moreso the fact that the data isn't saved anywhere as per James' answer below – Adam Jul 23 '19 at 10:04
This is true. The only data that is stored is the first three rows that are explicitly stored in your HTML. – liakoyras Jul 23 '19 at 10:41
A simple way to store data with JavaScript could be using cookies. – liakoyras Jul 23 '19 at 10:42

James Whiteley · Answer 2 · 2019-07-23T10:04:32.600

The issue is that your page isn't storing its data anywhere, so whenever you reload the page you're basically destroying any data you've modified and loading it from scratch again. You should use localStorage or a local database or something like that to keep track of data, and save your page's state when the function is called or on page unload.

In pseudocode:

const loadFromLocalStorage = () => {
  const rows = localStorage.getItem("extra_rows") // extra_rows can be an array
  for(elem in rows) {
    // add to table
  }
}

const saveToLocalStorage = (obj) => {
  const rows = localStorage.getItem("extra_rows")
  localStorage.setItem([...rows, obj])
}

const addNewRow = () => {
  var table = document.getElementById("table");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
  cell3.innerHTML = "NEW CELL3";

  const obj = {
    cell1: cell1, cell2: cell2, cell3: cell3
  }
  saveToLocalStorage(obj)
}

const myFunction = () => {
  loadFromLocalStorage()
  addNewRow()
}

myFunction()

Thank you! I will have to learn a bit more about storing the data as I'm not too familiar with the concept. — Adam, Jul 23 '19 at 10:05

Add new row at each HTML page load with Javascript

2 Answers2