Я относительно новичок в Javascript.Я создаю приложение на основе CRUD, и мне нужна помощь в функции редактирования

Question

Я пытаюсь создать чистое приложение Javascript CRUD.Данные отображаются в виде таблицы HTML.Я создал функцию создания, чтения и удаления.В функции «Редактировать» я хочу, чтобы данные отображались в текстовом поле при нажатии на ссылку «Изменить», а также должна быть кнопка «Сохранить».Как мне поступить?

var name = document.getElementById('Name').value;
var age = document.getElementById('Age').value;
var email = document.getElementById('Email').value;
var password = document.getElementById('Password').value;
var confirmpassword = document.getElementById('ConfirmPassword').value;
var dob = document.getElementById('DOB').value;
//add
var users = [];

function data(name, age, email, dob) {
  var user = {
    "name": name,
    "age": age,
    "email": email,
    "dob": dob
  }
  users.push(user);
  read(users);
  console.log(users);
}

//Read 

function read(users) {

  var html = "<table border='1|1'>";
  html += "<tr>";
  html += "<th>" + "Name" + "</th>"
  html += "<th>" + "Age" + "</th>"
  html += "<th>" + "Email" + "</th>";
  html += "<th>" + "DOB" + "</th>";
  html += "<th>" + "Edit" + "</th>";
  html += "<th>" + "Delete" + "</th>";
  html += "</tr>"

  var userhtml = document.getElementById('user');
  userhtml.innerHTML = '';
  for (var i = 0; i < users.length; i++) {
    html += "<tr>";
    html += "<td>" + users[i].name + "</td>";
    html += "<td>" + users[i].age + "</td>";
    html += "<td>" + users[i].email + "</td>";
    html += "<td>" + users[i].dob + "</td>";

    html += "<td>" + "<a href='#' onclick='editUsers()'>Edit</a>" + "</td>";
    html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";
    html += "</tr>";
  }
  html += "</table>";
  document.getElementById("user").innerHTML = html;
}

function deleteUsers(i) {
  debugger;
  users.splice(i, 1)
  read();
  console.log(users);
}

<form action="#" onsubmit="data(name, age, email, dob)">
  <div class="form-group">
    <label class="form-text">Name :</label>
    <input type="text" id="Name" placeholder="Enter Name" class="form-control" />
    <span id="ErrorName" class="text-danger"></span>
  </div>
  <div class="form-group">
    <label class="form-text">Age :</label>
    <input type="text" id="Age" placeholder="Enter Age" class="form-control" />
    <span id="ErrorAge" class="text-danger"></span>
  </div>
  <div class="form-group">
    <label class="form-text">Email :</label>
    <input type="text" id="Email" placeholder="Enter Email" class="form-control" />
    <span id="ErrorEmail" class="text-danger" />
  </div>
  <div class="form-group">
    <label class="form-text">Password  :</label>
    <input type="password" id="Password" placeholder="Enter Password" class="form-control" />
    <span id="ErrorPassword" class="text-danger"></span>
  </div>
  <div class="form-group">
    <label class="form-text">Confirm Password  :</label>
    <input type="password" id="ConfirmPassword" placeholder="Confirm Password" />
    <span id="ErrorConfirmPassword" class="text-danger"></span>
  </div>
  <div class="form-group">
    <label class="form-text">Date of Birth :</label>
    <input type="date" id="DOB" class="form-control" />
    <span id="ErrorDOB" class="text-danger"></span>
  </div>

  <div class="form-group col-xl-4 text-center">
    <input type="submit" id="Submit" class="btn btn-success" />
  </div>

</form>
<div class="user" id="user">

</div>

Answer 1

 function editUsers(index) {

        var x = document.getElementById('edit');
        x.style.display = "block";
        debugger;
        var userhtml1 = document.getElementById('edit');
        userhtml1.innerHTML = '';
        for (var i = 0; i < users.length; i++) {
            if (i == index) {
                userhtml1.innerHTML += ' <div class="form-group"> Name :<input class="form-control" id="EditName" type="text" value ="' + users[i].name + '"><br />' +
            'Age :<input class="form-control" id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
            'Email :<input class="form-control" id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
            'DOB :<input class="form-control" id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
            '<button class="edit" onclick="updateUser(' + i + ')">Update</button>';
            }
            else {

                userhtml1.innerHTML += '';
            }
        }
    }

    //CRUD - UPDATE
    function updateUser(index) {

        debugger;
        var updatename = document.getElementById('EditName').value;
        var updateage = document.getElementById('EditAge').value;
        var updateemail = document.getElementById('EditEmail').value;
        var updatedob = document.getElementById('EditDOB').value;

        if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
            alert("Please Fill the Fields!");
        }
        else {
            users[index].name = updatename;
            users[index].email = updateemail;
            users[index].age = updateage;
            users[index].dob = updatedob;
            read(users);
            var x = document.getElementById('edit');
            x.style.display = "none";
        }
    }