CODEWITHSUNDEEP
javascripthtml
Lawrence
Lawrence

Reputation: 5

How to save the changes that i've made in html tables after adding, deleting or editing rows

I want to add, remove and edit rows in my html table and be able to save it, so after i refresh the page or restart the server the changes are still there. So far i followed a youtube video where the guy uses plain javascript to add the row, but when refreshing the page the changes dissapear.

function addHtmlTableRow() {
  // Luam tabelul dupa id
  var table = document.getElementById("tabel-taguri"),
    newRow = table.insertRow(table.length),
    cell1 = newRow.insertCell(0),
    cell2 = newRow.insertCell(1),
    fname = document.getElementById("fname").value,
    fvalue = document.getElementById("fvalue").value;

  cell1.innerHTML = fname;
  cell2.innerHTML = fvalue;
}
<table id="tabel-taguri" class="table-indiv-product">
  <tr>
    <td>Info1</td>
    <td>Value</td>
  </tr>
</table>

<div class="tab">
  Name Tag :<input type="text" name="fname" id="fname"> Vaue Tag: <input type="text" name="fvalue" id="fvalue">
  <button onclick="addHtmlTableRow();">Add</button>
  <button>Edit</button>
  <button>Delete</button>
</div>

Upvotes: 0

Views: 568

Answers (1)

Vinit Neogi
Vinit Neogi

Reputation: 386

You can store the state of the table into the session or local storage or database. On every refresh, the changes the data will be fetched from the storage. I would recommend connecting your application with a database.

Upvotes: 2

Related Questions