При клике на кнопку 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>