Javascript 将更改从html表移动到数据库

我用html编写了一个表，如果用户点击编辑按钮，它的行内容可以编辑。 此表的数据来自mysql数据库。我希望我的用户能够更改内容可编辑字段，并在点击保存按钮后再次将更改发送到mysql表。 所以首先，我想知道如何将内容可编辑的更改保存在字符串变量中，以便能够将它们发布到数据库中。以下是我的相关代码：

<?php
 $servername = "localhost";
 $username   = "hevak_neshat";
 $password   = "shir moz peste";
 $dbname     = "hevak_android_api";
 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
 }
 $sql    = "SELECT * FROM beacons";
 $result = $conn->query($sql);
 if ($result->num_rows > 0) {
     echo "<thead>
            <tr>
                <th>Major number</th>
                <th>Minor number</th>
                <th>Client</th>
                <th>Location</th>
                <th>Link to ad</th>
                <th>Attachment</th>
                <th>Edit</th>
            </tr> 
        </thead>";
     echo "<tbody>";

     while ($row = $result->fetch_assoc()) {
         echo "<tr><td>" . $row["major"] . "</td><td>" . $row["minor"] . "</td><td>" . $row["client"] . "</td><td>" . $row["geolocation"] . "</td><td>" . $row["linktoadd"] . "</td><td>" . $row["attacment"] . "</td><td>";
         echo "<button class=\"editbtn\">Edit</button>";
         echo "<td><button class=\"savebtn\">Save</button></td>";
         echo "</td>";
         echo "</tr>";
     }
     echo "</tbody></table>";
 } else {
     echo "no results";
 }
 ?>

更新：

---

在我的代码中，我使用了可编辑的内容。但是，如果有人想将表中的用户更改移动到数据库中，请告诉我，即使这完全是另一种方式。只是一个能够编辑内容并将内容移动到db的表。

您需要将事件添加到可编辑元素中，并在隐藏变量resp中分配值，您可以在服务器端获取这些值。有关如何附加事件/事件侦听器的信息，请参阅本节。请参见浏览器对此类事件的支持@pratikwebdev我看到了，你知道更好的方法吗？不一定要使用contenteditable将更改从表移动到数据库？不一定要使用contenteditable？然后只需在中输出输入字段并用表单包装表格，然后在单击“保存”按钮时提交整个表格。@mina创建一个表格，其中包含具有唯一名称的输入字段的表格。在后端，您可以从请求中获取值。在这种情况下，表只是用来保存表单的布局。

$(document).on("click", ".editbtn", function (event) {
    event.preventDefault();
    alert("click on items to edit");
    var currentTD = $(this).parents('tr').find('td');
    if ($(this).html() == 'Edit') {
        $.each(currentTD, function () {
            $(this).prop('contenteditable', true)
        });
    } else {
        $.each(currentTD, function () {
            $(this).prop('contenteditable', false)
        });
    }
});