Как додать новый обьект на место старого?

Question

parsifaly @parsifaly

JavaScript

Как додать новый обьект на место старого?

При клике на кнопку Edit User запускаете функцию saveEditUser (), которая делает следующее:
a. Стягиваете данные с полей и формирует объект через класс.
b. Этот объект добавляется на место старого объекта через userIndex.
c. Поля зачищает.
d. Запускает функцию render (), которая генерируемого всю инфу в таблицу относительно вашего массива.

let login = document.getElementById("login");
let password = document.getElementById("password");
let email = document.getElementById("email");
let tableContainer = document.getElementById("tableContainer");
const vLogin = /^[a-zA-Z]{4,16}$/;
const vEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const vPassword = /^[a-zA-Z0-9]{8,15}$/;
let buttonOne = document.getElementById("buttonOne");
let editUsers = document.getElementById("editUsers");

vLogin.test(login.value);
vEmail.test(email.value);
vPassword.test(password.value);

let arr = [];
let id = 0;
document.getElementById("buttonOne").onclick = () => {
  addUser({
    login: login.value,
    email: password.value,
    password: email.value,
    id: id,
  });

  console.log(arr);
  login.value = "";
  email.value = "";
  password.value = "";
  render();
};

document.getElementById("editUsers").onclick = (id) => {
  editUsers.style.display = "none";
  buttonOne.style.display = "block";

  saveEditUser({
    login: login.value,
    email: password.value,
    password: email.value,
    id: id,
  })

  login.value = "";
  email.value = "";
  password.value = "";
};

function deleteUser(id) {
  arr.splice(
    arr.findIndex((user) => user.id == id),
    1
  );
}

function editUser(id) {
  login.value += arr[id].login;
  password.value += arr[id].password;
  email.value += arr[id].email;

  buttonOne.style.display = "none";
  editUsers.style.display = "block";
}

function addUser(user) {
  arr.push(user);
  id++;
}

function render() {
  let table = "";

  table += '<table  width="100%" >';

  for (let i = 0; i < arr.length; i++) {
    table += `<tr>
    <td style=' height:30px;width:4%' ><hr/>${i}</td>
<td style=' height:40px;margin-top: -10px'><hr/>${arr[i].login}</td>
<td style=' height:40px;padding-top: -50px'><hr/>${arr[i].email}</td>
<td height='40px'><hr/>${arr[i].password}</td>
<td height='40px'><hr/><button onclick='editUser(${arr[i].id})' style='width:70px;height:20px;background-color: yellow;'>Edit</button></td>
<td height='40px'><hr/><button onclick='deleteUser(${arr[i].id}); render()' style='width:70px;height:20px;background-color: red;'>Delet</button></td>
      </tr>`;
  }
  table += "</table>";
  tableContainer.innerHTML = table;
}

<!DOCTYPE html>
<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>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        display: flex;
        justify-content: space-between;
      }
      #one,
      #two {
        padding-top: 30px;
        padding-left: 80px;
        width: 50%;
      }
      #two {
        padding-top: 70px;
        padding-left: 0px;
        margin-right: 50px;
      }
      p {
        margin: 20px;
        margin-bottom: 5px;
      }
      input {
        margin: 20px;
        height: 30px;
        margin-top: 0px;
        padding-left: 10px;
        width: 90%;
      }
      #buttonOne,
      #editUsers {
        margin-left: 20px;
        height: 30px;
        width: 80px;
        color: green;
        border: 1px solid green;
        background-color: white;
      }
      #buttonOne:hover,
      #editUsers:hover {
        color: white;
        background-color: green;
      }
      #editUsers {
        display: none;
      }
      #table {
        width: 100%;
        height: 35px;
        border-collapse: collapse;
        /* border: 1px solid red;*/
      }
      td {
        /*border: 1px solid red;*/
        width: 16.6%;
      }
    </style>
  </head>
  <body>
    <div id="one">
      <p>Login</p>
      <input type="text" placeholder="First name" id="login" />
      <p>Password</p>
      <input type="password" placeholder="Password" id="password" />
      <p>Email address</p>
      <input type="email" placeholder="Email addres" id="email" />
      <button id="buttonOne">Add user</button>
      <button id="editUsers">Edit user</button>
    </div>
    <div id="two">
      <hr />
      <table id="table">
        <tr>
          <td style="width: 4%"><b> #</b></td>
          <td><b> Login</b></td>
          <td><b> Password</b></td>
          <td><b> Email</b></td>
          <td><b> Edit</b></td>
          <td><b> Delet</b></td>
        </tr>
        <hr />
      </table>
      <div id="tableContainer"></div>
    </div>

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