使用表中已更改的元素更新数据库

Question

我正在制作公司技术支持联系人的通讯簿，管理员可以以表格的形式访问所有地址。在此表中，他可以添加，删除和更改同一页面中的数据。

我已经成功设置了add和delete函数，但是我在edit方面做了大量工作。我正在使用node，express，mongodb和vanilla javascript。

我仍然是Web开发领域的新手，有些话我可能会用错，所以请提前对不起！

（对不起，我的法语，但是大多数单词在英语中的含义相同。）

我的HTML

<div>
  <input id="edit" type="button" value="Editer" onclick="return edit()">
  <input id="valider" type="hidden" value="Valider" onclick="return valider()">
</div>

<table id='myTable'>
  <thead>
    <tr class="header">
      <th>Nom de l'entreprise</th>
      <th>Téléphone 1</th>
      <th>Téléphone 2</th>
      <th>Mail</th>
    </tr>
  </thead>
  <tbody>
    <% companies.forEach(function(company){ %>  //I loop through my db
    <tr class="compName">
      <td hidden id='_id' > <%= company._id %> </td>
      <td> <input id="name" class="readonly" type="text" value=" <%= company.name %>"     readonly style="border: none" onblur="change(this)">    </td>
      <td> <input id="phone" class="readonly" type="text" value=" <%= company.phone %>"   readonly style="border: none" onblur="change(this)">    </td>
      <td> <input id="phone2" class="readonly" type="text" value=" <%= company.phone2 %>" readonly style="border: none" onblur="change(this)">    </td>
      <td> <input id="mail" class="readonly" type="text" value=" <%= company.mail %>"     readonly style="border: none" onblur="change(this)">    </td>
    </tr>
  <% }) %>
  </tbody>
</table>

我的脚本

<script>

function edit() {
    var editComp = document.getElementsByClassName("readonly");
    var edit = document.getElementById('edit').type = 'hidden'; //get the edit button and hide it
    var valider = document.getElementById('valider').type = 'button'; //then unhide the validate button so I can use it

    for (var i = 0; i < editComp.length; i++) { //remove the readonly for each td so I can edit it
      editComp[i].removeAttribute('readonly');
      editComp[i].setAttribute("style", "border: 1px solid red;");
    };
}

function valider() {
    var editComp = document.getElementsByClassName("readonly");
    var edit = document.getElementById('edit').type = 'button'; //unhide the edit button
    var valider = document.getElementById('valider').type = 'hidden' //hide my validate button

    for (var i = 0; i < editComp.length; i++) { //put back the readonly for each td so its uneditable
      editComp[i].setAttribute('readonly', true);
      editComp[i].setAttribute("style", "border: none;");
    };
}


function change(element) { //when the input gets unfocused, I assume that's because changes happened
    var setChanged = element.setAttribute("class", "readonly changed"); //I mark all changed element

    /*I want to udapte my database with the changed elements
      I was thing of getting the hidden company._id and the id of the changed element so I can update them specifically*/
}
</script>

因此，我想到了要获取更改后的行的col [0]，它是更改后的元素的_id，因此我可以将其定位为在数据库中进行更新，但是我不知道该怎么做

谢谢！