从动态创建的 HTML 表更新 LocalStorage 值

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 ie 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 = `
  <tr class="fullEmpDetail">
    <td id="teId">${empDetail.name.employeeIdLocal}</td>
    <td id="teName">${empDetail.name.employeeNameLocal}</td>
    <td id="teDesignation">${empDetail.name.designationLocal}</td>
    <td id="teSalary">$${empDetail.name.salaryLocal}</td>
    <td>
      <i class="fas fa-eye"></i>
      <i value="Edit" type="button" id="update-row" class="edit-row fas fa-pencil-alt"></i>
      <i value="Delete" type="button" class="remove-row fas fa-trash-alt"></i>
    </td>
    <td id="empDetailId" class="empDetailId">${empDetail.id}</td>
  </tr>
`;

  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;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div class="main-container">
    <h2>Employee Details</h2>
    <button id="addNewEmployee">+ Add New Employee</button>
    <div class="table-container-header">
      <table>
        <tr>
          <th>Employee ID</th>
          <th>Name</th>
          <th>Designation</th>
          <th>Salary</th>
          <th>Action</th>
          <th class="empDetailIdHeader">Local Storage ID</th>
        </tr>
      </table>
    </div>
    <div class="table-container-content">
      <table id="employeeTable">

      </table>
    </div>
  </div>

  <!-- Model Code -->
  <div id="#modal-container">
    <dialog id="favDialog">
      <h2>Enter Employee Details</h2>
      <form id="modal-form" method="dialog">
        <section>
          <p>
            <label for="employeeId">Employee ID: </label
              ><input type="text" id="employeeId" />
            </p>
            <p>
              <label for="employeeName">Name: </label
              ><input type="text" id="employeeName" />
            </p>
            <p>
              <label for="designation">Designation: </label
              ><input type="text" id="designation" />
            </p>
            <p>
              <label for="salary">Salary: </label
              ><input type="text" id="salary" />
            </p>
          </section>
          <menu>
            <button id="cancelModal" type="reset">Cancel</button>
            <button type="submit" id="submitModal">SUBMIT</button>
          </menu>
        </form>
      </dialog>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

Answer 1

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.

Answer 2

To update LocalStorage values from a dynamically created HTML table

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 = [];

//edit

let editID = "";

let onModalSubmit = modal.addEventListener("submit", function (e) {
  e.preventDefault();
  if (tr == null && addNewEmployee) {
    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(tr);

    tr = null;
  }
});

/////// Create Table Row

function createTableRow(empDetail) {
  const element = document.createElement("tr");
  let attr = document.createAttribute("data-id");
  attr.value = empDetail.id;
  element.setAttributeNode(attr);
  element.classList.add("fullEmpDetail");
  element.innerHTML = `
    <td id="teId">${empDetail.name.employeeIdLocal}</td>
    <td id="teName">${empDetail.name.employeeNameLocal}</td>
    <td id="teDesignation">${empDetail.name.designationLocal}</td>
    <td id="teSalary">$${empDetail.name.salaryLocal}</td>
    <td>
      <i class="fas fa-eye"></i>
      <i value="Edit" type="button" id="update-row" class="edit-row fas fa-pencil-alt"></i>
      <i value="Delete" type="button" class="remove-row fas fa-trash-alt"></i>
    </td>
`;

  empTable.appendChild(element);

  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(tr) {
  let tableEmpId = document.getElementById("teId");
  let tableEmpName = document.getElementById("teName");
  let tableEmpDesignation = document.getElementById("teDesignation");
  let tableEmpSalary = document.getElementById("teSalary");

  console.log(tr);

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

  editID = tr.dataset.id;

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

  editLocalStorage(editID, tr);
}

///////// Edit Local Storage

function editLocalStorage(editID, tr) {
  let empDetails = JSON.parse(localStorage.getItem("empDetails"));

  empDetails = empDetails.map((empDetail) => {
    if (empDetail.id === parseInt(editID)) {
      empDetail.name.employeeIdLocal = tr.cells[0].textContent;
      empDetail.name.employeeNameLocal = tr.cells[1].textContent;
      empDetail.name.designationLocal = tr.cells[2].textContent;
      empDetail.name.salaryLocal = tr.cells[3].textContent;
    }
    return empDetail;
  });
  localStorage.setItem("empDetails", JSON.stringify(empDetails));
}