Как реализовать обновление данных в таблице?

Question

[tempfolder]

Подскажите, пожалуйста, как реализовать функцию render(). Кнопка Add user добавляет данные с инпутов в обьект и пушит его в массив, после чего функция render должна генерировать таблицу исходя из данных в массиве. При нажатии на кнопку Delete строка в таблице по индексу удаляется в массиве и render() обновляет таблицу. https://codepen.io/tempfolder/pen/wvzXypE

Comments

[Bavashi]

Вот так

const main = document.querySelector(".main");
const form = document.forms.form;
const inputs = document.querySelectorAll(".form__input");
const btnAddUser = document.querySelector(".btn_theme_add");
const btnSaveUser = document.querySelector(".form__btn-save");
const btnEditUser = document.querySelector(".btn_theme_edit");
const btnDeleteUser = document.querySelector(".btn_theme_delete");
const tBody = document.querySelector(".tbody");
let arr = [];

function render() {
  tBody.innerHTML="";
  for (let i = 0, j=0; i < arr.length; i++) {
    let crtTr = document.createElement("tr");
  for (let i = 0; i < 6; i++) {
    let crtTd = document.createElement("td");
    crtTr.append(crtTd);
  }
    
    crtTr.childNodes[0].textContent = ++j;
    crtTr.childNodes[1].textContent = arr[i].login;
    crtTr.childNodes[2].textContent = arr[i].password;
    crtTr.childNodes[3].textContent = arr[i].email;
    crtTr.childNodes[4].innerHTML =
      '<button class="btn btn_theme_edit" name="editUser" type="button">Edit</button>';
    crtTr.childNodes[5].innerHTML =
      '<button class="btn btn_theme_delete" name="deleteUser" type="button">Delete</button>';
    tBody.append(crtTr);
  }
}

function addUser() {
  let obj = {
    login: inputs[0].value,
    password: inputs[1].value,
    email: inputs[2].value
  };
  arr.push(obj);
  form.reset();
}

function editUser() {
  console.log("editUser");
}

function deleteUser() {
  let index = event.target.parentNode.parentNode.firstChild.innerHTML;
  arr.splice(index-1, 1);
  console.log(arr);
}

function saveEditUser() {
  console.log("saveEditUser");
}

main.addEventListener("click", (event) => {
  if (event.target.name == "addUser") {
    addUser();
    render();
  } else if (event.target.name == "saveEditUser") {
    saveEditUser();
  } else if (event.target.name == "editUser") {
    editUser();
  } else if (event.target.name == "deleteUser") {
    deleteUser();
    render();
  }
});