To update LocalStorage values from a dynamically created HTML table

Question

The HTML table is dynamically created with the function createTableRow(empDetail), which is working but when the rows/cells values are updated/changed it reflects in the HTML table but I want the same respective changed values to get changed in LocalStorage against the respective id. Help is needed for function tableUpdate() Note: There is only one key i.e. empDetails and the same key has multiple id's of respective rows (Employee) created

"use strict";

let addNewEmployee = document.getElementById("addNewEmployee");
let modal = document.getElementById("favDialog");
let closeModal = document.getElementById("cancelModal");
let modalForm = document.getElementById("modal-form");
let submitModal = document.getElementById("submitModal");

let tableContainerHeader = document.querySelector(".table-container-header");
let tableContainerContent = document.querySelector(".table-container-content");

let empTable = document.getElementById("employeeTable");

const showModal = addNewEmployee.addEventListener("click", function() {
  modal.showModal();
});

closeModal.addEventListener("click", function() {
  modal.close();
});

let employeeId = document.getElementById("employeeId");
let employeeName = document.getElementById("employeeName");
let designation = document.getElementById("designation");
let salary = document.getElementById("salary");
let uniqueEmpId = document.getElementById("empDetailId");

let tr = null;
let empDetails = [];

if (localStorage.getItem("empDetails")) {
  empDetails.map((empDetail) => {
    createTableRow(empDetail);
  });
}

let onModalSubmit = modal.addEventListener("submit", function(e) {
  e.preventDefault();
  if (tr == null) {

    if (employeeId && employeeName && designation && salary != "") {
      let empDetail = {
        id: new Date().getTime(),
        name: {
          employeeIdLocal: employeeId.value,
          employeeNameLocal: employeeName.value,
          designationLocal: designation.value,
          salaryLocal: salary.value,
          uniqueEmpId: new Date().getTime(),
        },
      };

      modal.close();

      empDetails.push(empDetail);

      localStorage.setItem("empDetails", JSON.stringify(empDetails));

      modalForm.reset();

      createTableRow(empDetail);
    }
  } else {
    tableUpdate(e);
  }
});

/////// Create Table Row

function createTableRow(empDetail) {

  const tEmployeeMarkup = `
  
    ${empDetail.name.employeeIdLocal}
    ${empDetail.name.employeeNameLocal}
    ${empDetail.name.designationLocal}
    $${empDetail.name.salaryLocal}
    
      
      
      
    
    ${empDetail.id}
  
`;

  empTable.innerHTML += tEmployeeMarkup;

  document.getElementById("modal-form").reset();
}


///////  Remove Row

function onDeleteRow(e) {
  if (!e.target.classList.contains("remove-row")) {

    return;
  }

  const btn = e.target;
  btn.closest("tr").remove();
}

tableContainerContent.addEventListener("click", onDeleteRow);

//////////// Edit Row

tableContainerContent.addEventListener("click", onEditRow);

function onEditRow(e) {
  if (e.target.classList.contains("edit-row")) {


    modal.showModal();


    tr = e.target.parentNode.parentNode;
    // console.log(tr);

    let tableEmpId = tr.cells[0].textContent;
    let tableEmpName = tr.cells[1].textContent;
    let tableEmpDesignation = tr.cells[2].textContent;
    let tableEmpSalary = tr.cells[3].textContent;

    employeeId.value = tableEmpId;
    employeeName.value = tableEmpName;
    designation.value = tableEmpDesignation;
    salary.value = tableEmpSalary;
  }
}

///////////////// Update Row

function tableUpdate(e) {
  let tableEmpId = document.getElementById("teId");
  let tableEmpName = document.getElementById("teName");
  let tableEmpDesignation = document.getElementById("teDesignation");
  let tableEmpSalary = document.getElementById("teSalary");

  tr.cells[0].textContent = employeeId.value;
  tr.cells[1].textContent = employeeName.value;
  tr.cells[2].textContent = designation.value;
  tr.cells[3].textContent = salary.value;


  modalForm.reset();
  modal.close();

  let tableEmpIDs = document.querySelectorAll(".empDetailId");

  let empDetails = JSON.parse(localStorage.getItem("empDetails"));

  for (let row = 0; row < tableEmpIDs.length; row++) {
    for (let i = 0; i < empDetails.length; i++) {
      empDetails[i].name.employeeIdLocal = tableEmpId.textContent;
      empDetails[i].name.employeeNameLocal = tableEmpName.textContent;
      empDetails[i].name.designationLocal = tableEmpDesignation.textContent;
      empDetails[i].name.salaryLocal = tableEmpSalary.textContent;
      break;
    }
  }

  localStorage.setItem("empDetails", JSON.stringify(empDetails));


}

table
/* th,
td,
tr  */

{
  border: black solid 1px;
  width: 1000px;
  text-align: center;
}

table td,
table th {
  border: solid 1px black;
  width: 200px;
}

table {
  border-collapse: collapse;
}

.fas {
  margin: 0 10px;
}

.empDetailIdHeader,
.empDetailId {
  display: none;
}




  
  
  
  Document
  

  



  
    Employee Details
    
    
      
        
          Employee ID
          Name
          Designation
          Salary
          Action
          Local Storage ID
        
      
    
    
      

      
    
  

  
  
    
      Enter Employee Details
      
        
          
            Employee ID: 
            
            
              Name: 
            
            
              Designation: 
            
            
              Salary:

Kinglish · Accepted Answer

I think you'd be better off just writing the JSON from scratch each time, rather than trying to update it. Something like...

let entries = document.querySelectorAll("table.empDetailsTable tr");
let json = [], props = ['employeeIdLocal', 'employeeNameLocal', 'designationLocal', 'salaryLocal'] // in order that they appear in the table
entries.forEach(row => {
  let data = {}
  row.querySelectorAll('td').forEach((el, i) => {
    data[props[i]] = el.innerText;
  })
  json.push(data);
})

localStorage.setItem("empDetails", JSON.stringify(data));

I didn't understand your data structure, but hopefully this will suffice or point you in the right direction.

To update LocalStorage values from a dynamically created HTML table

Answers (2)

Related Questions